Creating File Upload input with Bootstrap

Creating File Upload input with Bootstrap

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.

Multiple Files Demo Single File Demo Drag & Drop Demo

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:

Bootstrap file upload

See online demo and code

A little markup used in the demo:

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:

Bootstrap file upload single

See online demo and code

The simple markup for this demo:

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:

jQuery file upload

See online demo and code

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:

Credit (kartik-v | zipped file)

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=”” rel=”stylesheet”>

<link href=”css/bootstrap-fileinput/fileinput.css” media=”all” rel=”stylesheet” type=”text/css”/>

<script src=”js/bootstrap-fileinput/fileinput.js” type=”text/javascript”></script>

<script src=”” type=”text/javascript”></script>

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.