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
});

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
});

• javascript
• jquery
• ajax
• xmlhttprequest

• 3 This might sound weird, but - have you, by any chance, any antivirus installed? And if you have, is the same behaviour observed when you disable the antivirus? – raina77ow Commented Apr 5, 2014 at 21:28
• On your suggestion of it maybe having something to do with that. I just tried it from my home machine (mac, no antivirus) for the first time (was deving on my work PC) and it works like a charm! I'll have a go at disabling the antivirus on the work PC and see if that has any effect. Huge thanks for the heads up! – Fraser Commented Apr 5, 2014 at 22:11
• @raina77ow Looks like the antivirus is the cause. I disabled it on my work machine and it's working great now. Thanks. Pop your answer below and I'll release the bounty. – Fraser Commented Apr 8, 2014 at 8:56

2 Answers 2

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.

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.