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!
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/