Customizable File Input Plugin With jQuery And Bootstrap - FileStyle

Customizable File Input Plugin With jQuery And Bootstrap - FileStyle
File Size: 198 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

FileStyle is a lightweight jQuery plugin for Bootstrap which allows to beautify the normal file upload input with Bootstrap button styles.

Install the FileStyle plugin via NPM:

npm install bootstrap-filestyle

How to use it:

1. Import the bootstrap-filestyle into your web project or directly include the JavaScript file bootstrap-filestyle.js after jQuery library as this:

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

2. Call the function on the normal file input field and done.

$('input').filestyle()

3. Customize the file input with the following options.

$('input').filestyle({

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

  // custom icon
  'iconName' : 'glyphicon glyphicon-folder-open',

  // CSS class of button
  'buttonName' : 'btn-default',

  // lg, nr, sm
  'size' : 'nr',

  // enables input
  'input' : true,

  // enables badge
  'badge' : true,

  // enable icon
  'icon' : true,

  // place button at the beginning of the input field
  'buttonBefore' : false,

  // disabled input field
  'disabled' : false,

  // custom placeholder
  'placeholder': ''
  
})

4. API methods.

// Clear selected files.
$(":file").filestyle('clear');

// Destroy the plugin
$(":file").filestyle('destroy');

// disable the input field
$(":file").filestyle('disabled');
$(":file").filestyle('disabled', true);

// set or get the value of the input option.
$(":file").filestyle('input');
$(":file").filestyle('input', false);

// Set or get the value of the icon option.
$(":file").filestyle('icon');
$(":file").filestyle('icon', false);

// Set or get the text of the button.
$(":file").filestyle('buttonText');
$(":file").filestyle('buttonText', 'Loading...');

// Set or get the class of the button.
$(":file").filestyle('buttonName');
$(":file").filestyle('buttonName', 'btn-danger'};

// Set or get the class of the icon.
$(":file").filestyle('iconName');
$(":file").filestyle('iconName', 'glyphicon glyphicon-home');

// Set or get the class of the input text.
$(":file").filestyle('size');
$(":file").filestyle('size', 'lg');

// Set or get button position.
$(":file").filestyle('buttonBefore');
$(":file").filestyle('buttonBefore', 'true');

// Set or get placeholder text.
$(":file").filestyle('placeholder');
$(":file").filestyle('placeholder', 'My file text');

Change log:

2017-08-17

  • fixed vals

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