title: How to add a progress bar to file upload using javascript and ajax call?
body: <p>I need a progress bar in my file uploader. This is the ajax call I am using for file upload and progress bar</p>
  
  <pre><code>$(function() {
  
          $('button[type=button]').click(function(e) {
              e.preventDefault();
              //Disable submit button
              $(this).prop('disabled',true);
  
              var form = document.forms[0];
              var formData = new FormData(form);
  
              // Ajax call for file uploaling
              var ajaxReq = $.ajax({
                  url : URI.file.multipleFileUploadUrl(),
                  type : 'POST',
                  data : formData,
                  cache : false,
                  contentType : false,
                  processData : false,
                  xhr: function(){
                      //Get XmlHttpRequest object
                       var xhr = $.ajaxSettings.xhr() ;
  
                      //Set onprogress event handler
  
                       xhr.upload.onprogress = function(event){
                          var perc = Math.round((event.loaded / event.total) * 100);
                          $('#progressBar').text(perc + '%');
                          $('#progressBar').css('width',perc + '%');
                       };
  
                       return xhr ;
                  },
                  beforeSend: function( xhr ) {
                      //Reset alert message and progress bar
                      $('#alertMsg').text('');
                      $('#progressBar').text('');
                      $('#progressBar').css('width','0%');
                  }
              });
  
              // Called on success of file upload
              ajaxReq.done(function(msg) {
                  $('#alertMsg').text(msg);
                  $('input[type=file]').val('');
                  $('button[type=submit]').prop('disabled',false);
              });
  
              // Called on failure of file upload
              ajaxReq.fail(function(jqXHR) {
                  $('#alertMsg').text(jqXHR.responseText+'('+jqXHR.status+
                          ' - '+jqXHR.statusText+')');
                  $('button[type=submit]').prop('disabled',false);
              });
          });
      });
  </code></pre>
  
  <p>Find below is the file upload which works correctly without integrating the progress bar.</p>
  
  <pre><code>function multipleFileUpload(form) {
      var uploadSuccess = true;
      var data = new FormData(form);
  
      var csrf_headerName  = $("meta[name='_csrf_header']").attr("content");
      var csrf_paramValue  = $("meta[name='_csrf']").attr("content");
      ShowLoad();
      $.ajax({
          type: "POST",
          enctype: 'multipart/form-data',
          url: URI.file.multipleFileUploadUrl(),
          data: data,
          beforeSend: function (request) {
              request.setRequestHeader(csrf_headerName, csrf_paramValue);
          },
           processData: false,
           contentType: false,
           cache: false,
           timeout: 6000000,
           success: function (data) {
              HideLoad();
              data.forEach(function(d, index){
                  if(d.status === 'ERROR'){
                      // HideLoad();
                      uploadSuccess = false;
                      toastr.error('Error has occurred while uploading image file '+d.data.name);
                  }else if( d.data.id != null ){
                      //HideLoad();
                      //toastr.success('Successfully updated '+d.data.name, 'Upload Success');
                  }
              });
  
              if(uploadSuccess){
                  mediaFileMetaDataSave(data[0],data[1]);
              }
           },
           error: function (e) {
              HideLoad();
              toastr.error('Error has occurred while uploading attachments.');
           }
      });
   }
  </code></pre>
  
  <p>WHen I use the above code in my script I can do file upload properly although the progress bar reach 100% immediately before file upload is complete. What is wrong here? </p>