In This Tutorial:
The default file upload button with the Bootstrap framework is an ordinary button that allows selecting a file.
By using different plug-ins, you may enable your visitors selecting one or more files along with image or file preview. Besides, it also enables you using different buttons with icons for selecting and uploading the files.
In this tutorial, I am going to use a cool plug-in (bootstrap-fileinput) that has many features.
This file upload plug-in which is based on jQuery and Bootstrap has the following features:
- Preview different files like images, pdf, video, audio etc.
- A user may select one or more files
- Drag and drop facility
- It also offers uploads based on AJAX
- Progress of file uploading
- And more
See the following section for live demos and how you may set up this Bootstrap / jQuery file upload in your web projects.
A demo with multiple files, preview, and remove options
In this demo of file upload input type, you may upload multiple files along with the option to remove and preview files. For previewing the image, you can see three small icons on the bottom of the image. Click on the zoom icon that will open a modal window. In the modal window, you may even enlarge that image to occupy the full screen.
If you have selected multiple files then you can see arrows for moving next or previous in the modal window. Have a look at the demo by clicking the link or image below where three files are selected initially:
A little markup used in the demo:
<div class="container kv-main">
<h1>File upload demo
<input id="file-upload-demo" type="file" multiple><br />
<button type="submit" class="btn btn-success">Upload Files</button>
<button type="reset" class="btn btn-warning">Reset</button>
You can see the complete code including the jQuery code in the demo page’s code section.
A demo with single file option
In this demo, only one file can be browsed and uploaded. For that, use the data-min-file-count data attribute and set value as 1. This option can be used for restricting the users for at least selecting a minimum number of files given.
After the file is selected, the Remove and Upload button will be visible as well:
The simple markup for this demo:
<input id="file-upload-bootstrap" class="file" type="file" data-min-file-count="1"> <br />
A demo of drag and drop multiple files
In this demo, multiple files can be chosen by the drag and drop facility. The thumbnails of dropped files will be visible that you may preview, zoom and remove just like in above demos. Again, you may have a larger view in a modal window as you click the zoom button. Try adding files by drag and drop on the demo page:
See the complete code on the demo page.
How to set up file uploading plug-in?
In order to use the plug-in on your website, you need to download it from the GitHub website:
You can see more demos and options there.
After downloading and extracting the package, get the fileinput.js or fileinput.min.js and fileinput.css or fileinput.min.css file. You also need to include the Bootstrap CSS and jQuery files as used in demos.
Other files are optional.
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/bootstrap-fileinput/fileinput.css” media=”all” rel=”stylesheet” type=”text/css”/>
Use the input file type with appropriate jQuery code (as used in demos or read more in developer’s page) as per the need of your project.