/jQuery-file-input

Changes the browser default file input to something more stylable.

Primary LanguageJavaScript

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