jquery file upload progress bar inaccurate

Question

I am using jquery file upload (http://blueimp.github.io/jQuery-File-Upload/) plugin.

My Code:

$('#fileupload').fileupload({
    url: 'server/index.php',
    dataType: 'json',
    dropZone: $('#dropzone'),
}).bind('fileuploadprogress', function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('.progress-bar').css('width', progress + '%');
});

When I do the file upload, the progress bar is very inaccurate. Every time when I upload no matter what size the file is, the progress bar will always stuck at around 10% until the file is upload finish, then it will directly goes up to 100%.

Why is it behave like that? How can I fix it to properly display the progress?

Thank you.

Answer 1

I'm having the file progress bar issue too. The odd thing is that the same implementation works on another site I have developed, but not on another. Odd as it may be, I struggled for hours trying to find out what is going on. I read another problem somewhere and blueimp here says it tested fine using similar setups, and someone mentioned that they had a proxy. Well I don't have a proxy, but then I checked it on another computer. Works fine, yet another computer, works fine again. Then I disabled AVG on my main computer, and wouldn't you know, works fine. Seems that with AVG enabled my data.loaded would almost always be the same as data.total. I'm sure it has to do with some stupid cache or something that they implement to "boost" your browsing speed.

Answer 2

The problem is that when you use the default autoUpload option the files are submitted immediately in the add callback and for the first n calls to progressall callback, the data.total is not fully updated. (n depends on workstation speed and on progressInterval option)

The solution I have found is to calculate the total files length in the 1st call of add and to use it in the progressall.

var originalAdd = $.blueimp.fileupload.prototype.options.add;
var iFilesCount = 0;
var dataTotal = 0;

$('#fileupload').fileupload({
    ...
    progressall: function (e, data) {
        if (dataTotal == 0) {
            dataTotal = 1;
        }
        var iProgress = parseInt(data.loaded / dataTotal * 100, 10);
        $('#progress .progress-bar').css('width', iProgress + '%');
    },
    add: function (e, data) {
        if (iFilesCount <= 0) {
            iFilesCount = data.originalFiles.length;
            dataTotal = 0;
            var i = 0;
            // sum up files lengths
            for (i=0; i < iFilesCount ;i++){
                dataTotal = dataTotal + data.originalFiles[i].size;
            }
        }
        iFilesCount--;
        // recall default add callback
        originalAdd.call(this, e, data);
    }
    ...
}

The output of console.log( data.loaded + ' / ' + data.total + ' / ' + dataTotal) in progressall

  536710 /  1610128 / 30060524 \
 1073418 /  6977218 / 30060524 |
 1610128 /  8587402 / 30060524 |
 2146838 / 12881204 / 30060524 |
 2683550 / 13954660 / 30060524 |
 3220258 / 16638300 / 30060524 |-- progress bar is not accurate
 3756968 / 19858646 / 30060524 |
 4293676 / 24689178 / 30060524 |
 4830384 / 27909544 / 30060524 /
 5367092 / 30060524 / 30060524 \
 5903800 / 30060524 / 30060524 |
 6440510 / 30060524 / 30060524 |
 6977218 / 30060524 / 30060524 |
 7513946 / 30060524 / 30060524 |
 8050674 / 30060524 / 30060524 |-- accurate progress bar
 ...                           |
 ...                           |
30060524 / 30060524 / 30060524 /