samuelwilliams / jQuery-file-input

Changes the browser default file input to something more stylable.

jQuery File Input

This library changes the default browser file input field allowing you to add style.

What does it do?

This library takes a file input field and turns it into a text field ready for styling without affecting normal file operation. Effectively, this:

<input type="file" name="upload">

becomes this:

<div class="jquery-file-input-wrapper">
    <input type="file" name="upload">
    <input type="text" class="jquery-file-input-field">
    <span class="jquery-file-input-button">browse</span>
</div>

More info here.

Usage

jQuery('input[type=file]').fileInput();

Options

Option Name	Option Default	Description
buttonFirst	false	Should the button come before the input
wrapperClass	jquery-file-input-wrapper	The class(es) on the wrapper element
inputClass	jquery-file-input-field	The class(es) on the input field
inputPlaceholder	select a file	The placeholder value on the input field
buttonClass	jquery-file-input-button	The class(es) on the browse button
buttonText	browse	The text for the browse button