Hit enter after type your search item

Bootstrap 3, 4, 5 / jQuery File Upload Buttons: 6 Demos

The input type file

Among the other input types like text, password, etc. the file input type allows the creation of a form element that enables users to select a file to upload in the Bootstrap framework, which is basically an HTML tag.

This is just a matter of specifying the HTML tag:

For example:

Compatible with: Bootstrap 3, Bootstrap 4, Bootstrap 5

However, designing and changing the text and designing of the file upload button is a tedious task. This is generally desired to match the upload file button with the rest of form fields in a web page, otherwise, it looks ugly and unmatched. This is not provided in the default classes by Bootstrap. You may use your own or third-party solutions for that.

Following is a guide to set up the Bootstrap file upload field if you are working in the Bootstrap framework and also included the jQuery library.

The guide is using a plug-in, bootstrap-lifestyle, which is available on Github website (credit link is given below). Let me start from simple to more stylish examples with icons in upload form controls to a complete form demo.

After the demos, you can see a step-by-step guide to set up this plug-in. The last demo is a sign-up form with PHP code to show you how to upload files while using this plug-in.

A simple file control button

In the following demo, bootstrap-filestyle plug-in is used to create a file selection field. You have to include four dependency files in the <head> section for these demos to work (see the setup guide at the bottom part).

See the demo and code by clicking the link below:

Bootstrap file upload simple

See online demo and code

The button is initialized via data attribute:

Complete code with markup:

An upload file control with different text and icon via data attribute

This control is using a different text “Select a file” along with an icon while text path field is disabled.

file upload change text


Bootstrap button style for file upload button example

The following is a demo of a Bootstrap styled buttons, where you can use the same class names as in Bootstrap buttons.

Bootstrap file upload

You can see, three upload file controls with three different styles and text. This time, the buttons are initiated by jQuery/JavaScript. The text and button name that represents the button style is specified in the jQuery section, just above the </body> tag.

The code:

The jQuery code

A demo of different icon

In this Bootstrap / jQuery upload file button, a different icon is used than the above examples. You may set the icon in the JavaScript section by using the iconName option, as shown below:

Bootstrap file upload icon

You can see the demo page’s code section, the glyphicon glyphicon-file is used in the options part after initiating the button. Apart from that, button text and button name are also specified.

The markup:

jQuery code:

An HTML file input button with clear option

The plug-in also includes the option to clear the selected file in the textbox area by clicking a “clear the file name” text.

Bootstrap upload file clear

The following code is used to create this button, including JS part:

The Markup:

The jQuery code:

A multiple file selection option for upload button demo

You may use the multiple attribute in the input type file tag to allow users to select multiple files by pressing the control or shift keys with the mouse etc.

The following demo shows selecting multiple files from the computer or system. After you choose multiple files you can also clear the selection by using the clear button.

The following code is used for markup and jQuery:

The markup:

The jQuery:

An example of file count

You can also show file count for the multiple file selection upload buttons. For that simply use the multiple attribute in the input type file tag and use input: false option in the jQuery section. See the demo:

jQuery upload file count

See online demo and code

The following code is used:

The markup:

The jQuery:

Setting up Bootstrap file upload plugin for your project

Follow these steps to set up this great plug-in to create beautiful and customized Bootstrap / jQuery-based file upload buttons:

Step 1:

Include the Bootstrap framework files from CDN or host it at your own.

You need both CSS and JavaScript files e.g.:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”  crossorigin=”anonymous”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”  crossorigin=”anonymous”></script>

Step 2:

You also need to include jQuery library, for example:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

Step 3:

Include Bootstrap FileStyle plug-in file:


You may get it from the plug-in site (link given below).

I have placed it in the JS folder for the demos, and used this line to refer:

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

Step 4:

Start creating buttons as shown in the above examples by using markup and jQuery.

Credits:  The plug-in website

A Bootstrap form with input file and PHP upload script

The following is a general sign-up form created by using Bootstrap framework that also has input type file control by using above plug-in. The demo also includes the PHP code to upload the file to the server.

See the demo online which is followed by a little description to set this up at your server:

jQuery upload file form

See online demo and code

Follow these steps to learn how this form will work:

Step 1:

The form is created by using the Bootstrap framework. For input type file customization, the above plug-in is also included in the head section. Following libraries are included in the head section:

<!DOCTYPE html>



<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”  crossorigin=”anonymous”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”  crossorigin=”anonymous”></script>

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

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

Step 2:

Following custom CSS for the form controls is used (skip this to learn file uploading only) or use default or your own scheme:

Step 3:

Creating the form that uses Bootstrap classes along with Bootstrap Fileupload plug-in’s options in the <body> section.

To upload file, following <form> tag is used:

<form class=”form-horizontal” role=”form” action=”process.php” method=”post” enctype=”multipart/form-data”>

The form will be submitted to process.php file that should contain the script for managing uploaded file as well as saving the information in the database.

For this demo, I am only using the PHP upload script in the process.php file(given below).

You can see the complete form code in the demo page, after the <body> opening tag.

Step 4:

The PHP code to upload the file placed in process.php file:

Note that, there must be uploadedimages (or change it as you want) destination folder created before running this code. Also, the sentfile is the name of file Upload input field in the form section.
Further Reading: jQuery file upload plug-in
This div height required for enabling the sticky sidebar