Bootstrap / jQuery input type file upload buttons and script

The input type file

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

This is just the matter of specifying HTML tag:

For example:

 

However, designing and changing the text and design of file upload button is a tedious task. This is generally desired to match 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 setup Bootstrap file upload field if you are working in Bootstrap framework and also included jQuery library.

The guide is using a plug-in, bootstrap-filestyle, which is available at 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 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 works.

See the demo and code by clicking the link or image below:

Bootstrap file upload simple

See online demo and code

The button is initialized via data attribute:

 

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. See the demo and code online:

file upload change text

See online demo and code

Bootstrap button style for file upload button example

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

Bootstrap file upload

See online demo and code

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 with different icon

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

Bootstrap file upload icon

See online demo and code

You can see in 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:

 

The 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. See a demo online:

Bootstrap upload file clear

See online demo and code

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 selecting multiple files by pressing the control or shift keys with mouse etc.

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

See online demo and code

The following code is used for markup and jQuery:

The markup:

 

The jQuery:

 

An example with 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 Filestyle plugin for your project

Follow these steps to set up this great plug-in to create the 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” integrity=”sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” crossorigin=”anonymous”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js” integrity=”sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==” 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:

bootstrap-filestyle.min.js

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>

<html>

<head>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” integrity=”sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” crossorigin=”anonymous”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js” integrity=”sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==” 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.