4

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.

Improve this question
11
  • How big are the files you are testing with, and have you tested it remote and not locally where the files will be uploaded instantaneously, due to bandwidth == disk access bandwidth. Commented Mar 23, 2014 at 16:11
  • @thetrompf Yeah, at first I was testing on locally. Which it feels like everything is perfectly working. But, when I tried with hosting server, then I face the problem as described in my question. Commented Mar 23, 2014 at 16:13
  • which browser and web server are you using? Commented Mar 23, 2014 at 16:17
  • @thetrompf Firefox and Dreamhost. Tested with IE 11 as well, also inaccurate. The progress bar straight away goes from 0% to 100% when the file just started to upload. Commented Mar 23, 2014 at 16:23
  • What is the size of the file you are testing with? The progress callback is called based on a time interval, and if it isn't called often enough on small files it will seem it goes from 0 to 100 instantly, or maybe you're just using too small files for you bandwidth. So the file will be uploaded before the first fileprogress callback is called. Commented Mar 23, 2014 at 16:25

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Good find, it saved me allot of debugging.
1

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 /
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.