Simple Clean File Input Replacemenet - jQuery Filestyle

File Size: 10.8 KB
Views Total: 2398
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

4. Possible plugin options to customize the file input.


  // 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" 

6. Set the themes you prefer. Available themes:

  • blue
  • green
  • yellow
  • black
  • red
  • purple
  • asphalt
<input type="file" 

7. API methods.

// clears the file input

// destroys the plugin

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

Change log:


  • Added themes.


  • 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.