Create Custom File Input Button With jQuery

In this post I am going to share simple jQuery plugin-fileinput.js which replaces the default file input button into a customizable Browse button which enables the user to browse and select multiple file(s) from local with custom design. The plugin is easily integrated with Bootstrap framework and you can also create your own styles in the CSS. To clear the file input, just click the ‘X’ button displayed at the end of the selected file(s).

Libraries

Add the following library on page.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="fileinput.css">
 
<!--JS-->
<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<script src="fileinput.min.js"></script>

HTML

Add a simple file input box.

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

Now call the plugin’s function on page.

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

Now it’s simplay convert default file input box into

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

You can also pass following properties in plugins function to customize the file inputbox look and feel.

$(function() { 
 $('input[type="file"]').fileinput({
    title: 'Browse...',
    multipleText: '{0} files', // for multiple selection. {0} will be replaced with number of seleted files
    showMultipleNames: true, // if true, show filenames comma separated instead text from multipleText
    buttonClass: 'btn btn-info',
    selectedClass: 'file-selected',
    clearButton: '<button type="button" class="fileinput-clear close">&times;</button>',
    complete: function() {
        // $(this) is input[type="file"]
    }
 });
});

Almost all options can be redefined by data-attributes:

data-title
data-multiple-text
data-show-multiple-names
data-button-class
data-selected-class

See live demo and download source code.

DEMO | DOWNLOAD

This awesome jQuery plugin is developed by Mictronics. Visit their official github repository for more information and follow for future updates.

Create Custom File Input Button With jQuery – fileinput.js