XMLHttpRequest Level 2 - Determinate if upload finished

Question

I am using ajax for file uploads. After the file is uploaded, php should check it (mime, size, virus (clamscan) and more) - this takes some seconds for larger files. While the file is uploading, a HTML5 <progress> is filling, when the file is ready and PHP starts checking, the progress should switch to indeterminate. I thought of to ways to do this (which both do not work):

Checking upload.onload event

xhr.upload.addEventListener("load", function (e) {     $("#uploadprogress").attr("value", false);     $("#uploadprogress").attr("max", false);     $("#progress").text("Checking file..."); }); 

This doesn't work, because the onload-event firest when the request is ready, not when upload is ready.

Checking if upload progress percentage = 100%

xhr.upload.addEventListener("progress", function (e) {     if (e.lengthComputable && e) {         p = (e.loaded / e.total);         if (p==1) {             $("#uploadprogress").attr("value", false);             $("#uploadprogress").attr("max", false);             $("#progress").text("Checking file...");         } else {             var percent = Math.ceil(p * 1000) / 10;             $("#uploadprogress").val(e.loaded);             $("#uploadprogress").attr("max", e.total);             $("#progress").text("Uploading... " + percent + "%");         }    } } }); 

This does not work, because the upload percentage sometimes stops at approx. 97%, despite the upload is finished and PHP starts handling the files

Is there another possibility checking this?

Answer 1

The event you want to listen to is readystatechange on the XHR object (not on XHR.upload). readyState is 4 when the upload has finished sending and the server closes the connection. loadend/load fire when the upload has finished regardless of whether the server closes the connection. Just for reference, here are the events you can listen to and when they fire:

    var xhr = new XMLHttpRequest();      // ...     // do stuff with xhr     // ...      xhr.upload.addEventListener('loadstart', function(e) {       // When the request starts.     });     xhr.upload.addEventListener('progress', function(e) {       // While sending and loading data.     });     xhr.upload.addEventListener('load', function(e) {       // When the request has *successfully* completed.       // Even if the server hasn't responded that it finished.     });     xhr.upload.addEventListener('loadend', function(e) {       // When the request has completed (either in success or failure).       // Just like 'load', even if the server hasn't        // responded that it finished processing the request.     });     xhr.upload.addEventListener('error', function(e) {       // When the request has failed.     });     xhr.upload.addEventListener('abort', function(e) {       // When the request has been aborted.        // For instance, by invoking the abort() method.     });     xhr.upload.addEventListener('timeout', function(e) {       // When the author specified timeout has passed        // before the request could complete.     });      // notice that the event handler is on xhr and not xhr.upload     xhr.addEventListener('readystatechange', function(e) {       if( this.readyState === 4 ) {         // the transfer has completed and the server closed the connection.       }     });