XMLHttpRequest progress event advances much faster than the actual upload

Question

I'm trying to implement an upload form and return the upload status to return tot he user using xhr. Everything seems to be implemented correctly, however when uploading, the callbacks seem to occur way too quick and return a much higher percentage than has actually occurred.

With files ~<20Mb, I get a callback immediately which shows over 99% while the upload continues to churn away for some time in the background.

See the below screengrab showing the console from a 74Mb file. This was taken a couple of seconds after the upload was initialised and the upload continued for another ~60 seconds (notice just 3 callbacks registering (loaded totalsize) (calculatedpercentage) and the ajax upload continuing with the throbber).

Has anyone experienced this and managed to get an acurate representation of upload status?

(the 'load' event triggers correctly after the upload process)

Here's my code:

$(this).ajaxSubmit({
    target: '#output',
    beforeSubmit:  showRequest,
    xhr: function()
    {
        myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload)
        {
            console.log('have xhr');
            myXhr.upload.addEventListener('progress', function(ev){
                if (ev.lengthComputable) {
                    console.log(ev.loaded + " " + ev.total);
                    console.log((ev.loaded / ev.total) * 100 + "%");
                }
            }, false);

        }
        return myXhr;
    },
    dataType: 'json',
    success:  afterSuccess
});

Answer 1

There are several reports of the same behavior - incorrect progress report on file upload - caused by antivirus software checking the files to be uploaded. My guess is that some part of antivirus attempts to make up for possible delay (caused by the check) - and fails to do it properly.

Answer 2

I had the same issue recently. I think your ajax call is simply returned before your file uploads. To work around this load back what you uploaded and check for the load event. For example, if you are uploading an image (using jQuery):

var loadCheck = $('<img src="' + uploadedUrl +'">').hide().appendTo('body');
loadCheck.on('load', updateProgressBar());

of Course you can implement it on other type files, and incorporate an $.each iteration.