jQuery plugin to enhance html file input to look like bootstrap button, showing image thumb and apply useful restrictions (e.g. file types, size, number of files etc.)
HTML CSS
Latest commit 306e763 Jun 23, 2016 @ajaxray Updated demo, readme to include thumb preview example. Alternate defa…
…ult label based on multiple file support.

README.md

Bootstrap File Field

jQuery plugin to enhance file fields with modern features and bootstrap design. Smart file selection features (e,g, showing thumbs, restricting size and file type etc.) while using generic form submission, no ajax upload.

What it does?

  • Display file upload field like Bootstrap buttons
  • Can display preview thumbs of selected images
  • Can restrict file types - allow only configured mime types
  • Can set maximum and/or minimum file size limit
  • Can set maximum and/or minimum total size limit
  • Can set maximum and/or minimum number of files can be selected
  • All restrictions are checked on client side using HTML5 File/FileList/FileReader APIs
  • Display user friendly errors if any restriction prevented file selection
  • Display name/list of selected files (if no error and preview is off)

Check this live demo, it's usability + simplicity!

Screenshot

Install

Using bower

bower install bootstrap-file-field --save

Manual Download

Download The Zip file and extract to appropriate directory.

Then Include the plugin css file
<link rel="stylesheet" type="text/css" href="path/to/plugin-dir/src/css/bootstrap_file_field.css">
And the JS file
<script type="text/javascript" src="path/to/plugin-dir/src/js/bootstrap_file_field.js"></script>

Remember to include jQuery js and Bootstrap css files before plugin files. Also, the file paths may have to be adjusted based on your local setup.

How to use

Initiating with data attribute, no customization

<input type="file" data-field-type="bootstrap-file-filed" name="sample1">

Showing image preview, setting custom label, class and file types. Allows multiple.

<input type="file" name="sample3[]"    
    data-field-type="bootstrap-file-filed"  
    data-label="Select Image Files"  
    data-btn-class="btn-primary"  
    data-file-types="image/jpeg,image/png,image/gif"  
    data-preview="on"  
    multiple >

Allow PDF files only. Preview off

<input type="file" name="sample4[]"  
    data-field-type="bootstrap-file-filed"  
    data-label="Select PDF Files"  
    data-file-types="application/pdf"  
    multiple >

Initiating with javascript by class/selector. Select at most 2 images below 80kb each

HTML :
<input type="file" class="smart-file" name="sample3[]" multiple>
JavaScript :

$('.smart-file').bootstrapFileField({   
    maxNumFiles: 2,  
    fileTypes: 'image/jpeg,image/png',  
    maxFileSize: 80000 // 80kb in bytes  
});

Check the demo/index.html file (in downloaded source) or this live demo to see more examples in action (including all the above).

Supported Restrictions

You can add restrictions based on -

  • File Types (using mime types)
  • Maximum File Size
  • Minimum File Size
  • Maximum Total Size (for multiple selection)
  • Maximum number of files
  • Minimum number of files

Configuration options

You can activate plugin on a file field by adding attribute data-field-type="bootstrap-file-field" or using javascript (see examples above). Then you can use the following settings keys (as parameter to javascript activation function) or data attributes to configure your file field.

What to configure JS Settings Option Data attribute Default
Button label label data-label Select File/Select Files
Button class btnClass data-btn-class btn-default
Preview thumb preview data-preview off
Allowed file types by mime type (comma separated values) fileTypes data-file-types Ignored
Maximum file size (in byte) maxFileSize data-max-file-size Ignored
Minimum file size (in byte) minFileSize data-min-file-size Ignored
Maximum total file size (M) maxTotalSize data-max-total-size Ignored
Maximum number of files (M) maxNumFiles data-max-num-files Ignored
Minimum number of files (M) minNumFiles data-min-num-files Ignored

(M) = For multiple file selection

Inspired by: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/