How to Make a Progress Bar Using AJAX (Detailed Tutorial)

Making a progress bar showing data uploaded or downloaded is not a big deal. Using Javascript's built in function you can make a full fledged progress bar. You can also customize it the way you want it.

Let us take a scenario where we are supposed to upload a file in a directory. What we want is that when we upload the file, the upload progress is shown. A demo of our progress bar is shown in the video below.

How to make a Progress Bar by cronoproductions

Let's make a PHP file that store our uploaded content somewhere on our hard disk. (Note we are using wamp server for this purpose and the PHP file will be hosted on a localhost).

Making the PHP file

Note: This section just tells how to upload a file into a particular directory, if you are not interested in it, then you may skip to the next section.

Open your text editor. You can even use notepad for this purpose.

Let's define a directory for our purpose in the PHP file

 <?php  
 define('IMAGEPATH','C:\\wamp\\www\\page\\images\\');

where 'IMAGEPATH' is a constant having value of 'C:\\wamp\\www\\page\\images\\'. This will be our directory where we are going to store our files.

Now we will need to set up a variable to hold our complete destination.

$path=IMAGEPATH.$_FILES[thumbnail][name];

This is the path where our uploaded data is going to be stored. Here $_FILES[thumbnail][name] contains name of the file that we will upload. $_FILES works as an array. Remember to write down the right index in $_FILES array. The first index is the name of the file type input in HTML Form (explained later), in our case it is 'thumbnail'. The second index 'name' specifies the name of the file.

Next we have to move the uploaded file from temporary directory to our desired location.

 move_uploaded_file($_FILES['thumbnail']['tmp_name'],$path);

where 'tmp_name' is a temporary name given to the file when it is uploaded to server and $path is our desired directory.

Up to this point, we have set our destination for the uploaded file, save the php file name with any name you want. For this tutorial we shall name it as "upload.php". Now its time to make the progress bar.

Making the Progress Bar

Lets make the progress bar. The HTML code for the 'form' is given below

<form enctype="multipart/form-data" method="post" action="upload.php" id="dataform">
    
      <label>Song Title:</label>&nbsp;<input type="text" name="songtitle"/>
       <div>
       <label>Song Description:</label></br><textarea name="description" rows="6" cols="30" id="textarea"></textarea>
       </br>
       <label>Upload file</label><input id="file" type="file" name="song"/>
       <label>Thumbnail</label><input id="file2" type="file" name="thumbnail"/>
        <div class="position-button"><button type="button" id="button">Upload</button>&nbsp<button type="button" id="button2">Cancel</button></div>
<!--progressbar div --><div class="progressbar"><span class="progressbar" id="progress"><p class="numeric">0%</p></span><div class="process"></div></div>
<!--Completion text div --><div class="OnComplete"><p class="green" id="completeText"><p></div>

</form>

This form was made according to my requirements, you can change it according to your specifications.(There are two file inputs in the form, for this tutorial we only need one that is why we only set directory for one of the two inputs).

Notice encryption in the form attribute is "multipart/form-data". It is essential for uploading a file.

You may have noticed that the upload button (button element with the id "button") is not of type submit. The reason is that i am going to use AJAX to transfer data from this form to the server. In order to do that we shall be using Javascript's functions.The second button (button element with the id "cancel") is used to cancel the upload. There is also a progress bar div. The div gives our progress bar a structure. The class 'progressbar' will be used to stylize the progress bar.The div with 'process' class is used to show the uploading progress. The 'numeric' div shows the progress numerically. The div with 'completeText' Id displays a message on progress completion, error or abortion.

The CSS of the progress bar and display texts is given below.

.progressbar
{
    width:100%;
    height: 20px;
    background-color: white;
    border-style: dotted;
    border-width: 1px;
    border-color:grey;
    display: none;
}
.OnComplete
{
 text-align: center;
}


.process
{
height: 100%;
background-color: red;

width:0%;

z-index:0; 
}

.abort{

font-style: italic;

display: none;

color:orange;
}

.error{
font-style: italic;    
display: none;

color:red;
}

Notice that the display of the progress bar is set to none because we want to show progress bar only when the user click on the upload button.

In order to send the data using AJAX, we will have to create an AJAX request variable. The method used for creating request variable is given below.

function create_request()
{

    try{

        request=new XMLHttpRequest();
    }
    catch(tryMs)
    {
        
        try{ 
            request=new  ActiveXObject("Msxml2.XMLHTTP");
        }
        
        catch(otherMS)
        {         try{
                request=new ActiveXObject("Microsoft.XMLHTTP");}
catch(nothing)
{
request=null;}
        }
    }
    return request;
}

XMLHttpRequest object is used to create a request. Other two objects i.e ActiveXObject("Msxml2.XMLHTTP") and ActiveXObject("Microsoft.XMLHTTP") are also for the same purpose but they are used for Internet Explorer.

Next we will create a 'request variable' by invoking the method, we just created above.

 var request=create_request();

We have to make that button live in HTML form above. What we want is that when we click on the button our data is submitted. Therefore we need to bind a 'click' event with the button. We will be using Jquery's click method for this purpose. At this point our script does not know what to do after we click that button, so we have to code it all the way through.

Firstly, we will need to extract data from the HTML Form.

    $("#button").click(function(){
         var x = new FormData($('#dataform')[0]);

Here we have extracted data from the HTML Form with the Id 'dataform'.

Next we will have to configure some events before sending the data. We shall configure following events.

Progress (We need this to make our progress bar)
Load (We need this to show 'a message' when the progress is complete).
Error (We need this in a case, where any error occurs during data transfer).
Abort (We need this in the case, when the user want to abort the upload).

Binding the Events


    $("#button").click(function(){
        $(".progessbar").fadeIn();
         var x = new FormData($('#dataform')[0]);

        request.upload.addEventListener("progress",update_bar,"false");  //Binding progress event on data upload
        request.addEventListener("load",showText,"false");// Binding load event
        request.addEventListener("error",showError,"false"); // Binding Error event
        request.addEventListener("abort",abortRequest,"false"); // Binding Abort event
        request.open("POST","upload.php");// Configuring Delivery method and defining url
        request.send(x); // sending data
        });

That's pretty much how we will configure our events. Next, we will code the methods those are going to execute when any of the above events is triggered. As shown above, we will need to define 'update_bar', 'show_text', "showError" and "abortRequest" methods.

   function update_bar(event)
    {  var sent=event.loaded; // stores the amount of data that is uploaded in sent variable
       var total=event.total; // stores the total data to be submitted in total variable.
       var percent=Math.floor(sent/total*100); // calculates the percentage of data uploaded.
   
        $(".process").css('width',percent+'%'); //Updating the progress bar by setting width of process div equal to that of percentage calculated.
        $(".numeric").replaceWith('<p class="numeric">'+percent+'%</p>'); //Displays the progress numerically.
    }

    function timeout()
    {
        $("#completeText").fadeOut();
    }
   
    function showText()
    {  
       $("#completeText").replaceWith('<p class="complete" id="completeText">Upload Complete<p>'); //replaces element with id "completeText" with that in the brackets.
       $("#completeText").fadeIn(); //Displays the text with a fade in effect.
       setTimeout("timeout();",1200); //Shows the text for 1200 milliseconds and then executes timeout() method. 
    }

     function showError()
    {
     $("#completeText").replaceWith('<p class="error" id="completeText">Error....<p>'); //replaces element with id "completeText" with that in the brackets.
     $("#completeText").fadeIn(); //Displays the text with a fade in effect.
     setTimeout("timeout();",1200); //Shows the text for 1200 milliseconds and the executes timeout() method.
     }

    function abortRequest()
    {
     $("#completeText").replaceWith('<p class="abort" id="completeText">Aborted!<p>'); //replaces element with id "completeText" with that in the brackets.     $("#completeText").fadeIn();//Displays the text with a fade in effect     setTimeout("timeout();",1200); //Shows the text for 1200 milliseconds and the executes timeout() method.
         }
    
    
    $("#button2").click(function()
                        {
         request.abort(); //Triggers the abort event.
        $(".progressbar").fadeOut(); // Hides the progress bar with a fade out effect.
                        });

That's all of the code. You can stylize the progress bar and texts according to your own requirements.

If you are facing any problems, then feel free to share your problems in comments.