javascript - Track ajax post progress for fileupload using jquery ajax and FormData

Question

var files = [];

$(document).ready(function (){
    dropArea = document.getElementById("droparea");
});

// when we drag and drop files into the div#droparea
dropArea.addEventListener("drop", function (evt) {
    files = evt.dataTransfer.files;
}, false);  

function uploadFiles(stepX) {
    var url = "/ajax/uploadfiles.php";
    var type = "POST";

    if (files.length > 0) {
         var data = new FormData(); // we use FormData here to send the multiple files data for upload

          for (var i=0; i<files.length; i++) {
       var file = files[i];
             data.append(i, file);  
   }
         //start the ajax
         return $.ajax({
   //this is the php file that processes the data and send mail
         url: url,  

  //POST method is used
  type: type,

   //pass the data          
   data: data,      

    //Do not cache the page
          cache: false,

// DO NOT set the contentType and processData
// see http://stackoverflow.com/a/5976031/80353
contentType: false,
processData: false,

//success
      success: function (json) {                
      //if POST is a success expect no errors
     if (json.error == null && json.result != null) {                   
                    data = json.result.data;

                // error 
                } else {
                    alert(json.error);  
                }           
            }       
        });
    } 
    return {'error' : 'No files', 'result' : null};
}

How do I track the progress of the file upload if I want to retain this method to upload files to server?

Answer 1

Note the comment with @TODO

//start the ajax
return $.ajax({
            //this is the php file that processes the data and send mail
            url: url,   

            //POST method is used
            type: type,

            //pass the data         
            data: data,     

            //Do not cache the page
            cache: false,

            //@TODO start here
            xhr: function() {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            //@TODO end here

            // DO NOT set the contentType and processData
            // see http://stackoverflow.com/a/5976031/80353
            contentType: false,
            processData: false,

Add a standalone function that updates the progress.

function updateProgress(evt) {
    console.log('updateProgress');
    if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
    } else {
            // Unable to compute progress information since the total size is unknown
            console.log('unable to complete');
    }
}

From https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest > Monitoring progress