The file input is one of those HTML elements that are complex to style with CSS.
As a result, now a days we see many ajax uploader plugins (e,g, DropZone) that helps to modify appearance of file input. Now, what if I have a/some html fields in a regular form (no ajax upload required), but I want to make it look beautiful? Additionally I want to have other cool things that those ajax uploader provides like showing image thumbnails and restricting file types?
One ready-made solution is – BootstrapFileField. A 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.)
Check this live demo, it’s usability + simplicity!
What this tiny plugin does?
- Change appearance of file upload field like a Bootstrap button
- 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 (for each selected file)
- Can set maximum and/or minimum total size limit
- Can set maximum and/or minimum number of files can be selected
- Creating image thumb and checking restrictions are done on client side (within browser) 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)
How to use?
You can use it by downloading ZIP from github repository or by using bower. See details of installation and usages instruction in readme.md.
Last words
So far I’ve checked, it works in all major browsers. If you face a browser compatibility issue or any other bug, please report here. Your suggestion may improve it to another level.
