Simple Clean File Input Replacemenet - jQuery Filestyle

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.

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,
  // 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. API methods.

// clears the file input
$('input').jfilestyle('clear');
// destroys the plugin
$('input').jfilestyle('destroy');
// sets options
$('input').jfilestyle('option', VALUE);

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

  • Publication date: 05.11.2017
  • Source