Customizable File Input Button With jQuery - fileinput.js

The jQuery fileinput.js plugin replaces the regular file input field with a customizable Browse button which enables the user to browse and select file(s) from local.

To clear the file input, just click the 'Clear' button displayed at the end of the selected file(s).

Easy to integrate with Bootstrap 4/3 framework and you can also create your own styles in the CSS.

How to use it:

1. Add jQuery library and the jQuery fileinput.js plugin's files to the page.

<link href="fileinput.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="fileinput.js"></script>

2. Call the function on the file input:

<input type="file" name="file">

$(function(){

  $('input[type="file"]').fileinput();

});

3. This will convert the regular file input into...

<span class="fileinput-wrapper file-selected">
  <span class="fileinput btn btn-default">
    <span>Browse...</span>
    <input type="file" name="file">
  </span>
  <span class="fileinput-name">
    selected file here
    <button type="button" class="fileinput-clear close">×</button>
  </span>
</span>

4. Apply your own styles to the file input button.

.btn-default {
  /* styles here */
}

.fileinput-name {
  /* styles here */
}

5. The plugin also supports multiple file input:

<input type="file" name="file" multiple>

$('input[type="file"]').fileinput({
  multipleText: '{0} files',
  showMultipleNames: true
});

6. More configuration options.

$('input[type="file"]').fileinput({

  // text for file select button
  title: 'Browse...',
  
  // class of file select button
  buttonClass: 'btn btn-default',

  // class after selected
  selectedClass: 'file-selected',

  // html of clear button
  clearButton: '<button type="button" class="fileinput-clear close">&times;</button>'
  
});

7. Trigger a function after selection.

$('input[type="file"]').fileinput({

  complete: function() {
    // $(this) is input[type="file"]
  }

});

8. You can also config the file input via data attributes in case you have multiple file inputs on the page.

<input type="file" name="file"
       data-title='value'
       data-multiple-text='value'
       data-show-multiple-names='value'
       data-button-class='value'
       data-selected-class='value'>

---

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