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
dropA         


        

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