Simple Clean File Input Replacemenet - jQuery Filestyle

Filestyle is a simple plain version of the Bootstrap FileStyle plugin which helps you create nice clean, drag-and-drop file input fields without the need of Bootstrap framework.

How to use it:

1. Include the style sheet jquery-filestyle.css in the head section of the web page that provides the default styles for the file input.

<link href="jquery-filestyle.css" rel="stylesheet">

2. Include the JavaScript file jquery-filestyle.js after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-filestyle.js"></script>

3. Call the function on the target file input and you're done.

<input type="file" name="example" id="myIput">

$('input').jfilestyle()

4. Possible plugin options to customize the file input.

$('input').jfilestyle({

  // button text
  'text': 'Choose file',

  // shows input field
  'input': true,

  // is disabled?
  'disabled': false,

  // where to place the button
  'buttonBefore': false,

  // input size
  'inputSize': '200px',

  // custom placeholder
  'placeholder': '',

  // enable drag and drop
  'dragdrop': true,

  // set the thneme
  'theme': 'default',

  // callback
  'onChange': function () {}
  
})

5. The options can also be passed via data attribute in the file input.

<input type="file" class="example" 
       data-buttonText="Find" 
       data-input="false"
       data-size="300px">

6. Set the themes you prefer. Available themes:

• blue
• green
• yellow
• black
• red
• purple
• asphalt

<input type="file" 
       class="example" 
       data-theme="blue" 
       data-text="blue">

7. API methods.

// clears the file input
$('input').jfilestyle('clear');

// destroys the plugin
$('input').jfilestyle('destroy');

// sets options
$('input').jfilestyle('option', VALUE);

Change log:

2017-11-21

• Added themes.

2017-11-08

• Fixed attr default options

---

This awesome jQuery plugin is developed by markusslima. For more Advanced Usages, please check the demo page or visit the official website.