Ajax file upload progress event not firing

Question

I am uploading a file via ajax request, by simply splitting them in to chunks.

The problem is progress event, Firefox for some reason doesn't want to fire that event, here is my code (most of the unnecessary code is removed)

//slice file if(file.mozSlice){ chunk = file.mozSlice(startByte, endByte); }else if(file.slice){ chunk = file.slice(startByte, endByte); }else{ chunk = file; isLast = true; } var xhr = new XMLHttpRequest(); xhr.upload.addEventListener('progress', function(e){ console.log('progress'); }, false); xhr.upload.addEventListener('error', function(e){ console.log("upload error!"); }); xhr.onreadystatechange = function(e){ if(this.readyState == 4 && this.status == 200){ //this chunk has bee uploaded, proceed with the next one... } } xhr.open('POST', "", true); xhr.setRequestHeader('Cache-Control', 'no-cache'); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');//header xhr.setRequestHeader('Content-Type', 'application/octet-stream');//generic stream header xhr.send(chunk);

I'm sure i haven't made any big mistakes since chrome works without any problems, so there must be some Firefox related issue.

Maybe it completes so fast there is never any progress to report? — Halcyon
– Halcyon, Commented Apr 16, 2013 at 13:49
No it doesn't i have tried with large files and i can see chunks being uploaded, sometimes it takes ~3secs for the chunk to be uploaded. — Linas
– Linas, Commented Apr 16, 2013 at 13:50
The code you listed here appears to be correct, and I am not seeing any progress event notification issues in Firefox myself. So, there is likely something you are leaving out that is causing problems in your client-side code. Without a live example, it may be difficult to determine the exact source of your problem. — Ray Nicholus
– Ray Nicholus, Commented Apr 16, 2013 at 14:26

Emile Bergeron · Accepted Answer · 2016-11-21 02:39:45Z

for Chrome:

xhr.upload.addEventListener('progress', function(e) { console.log('progress'); }, false);

for Firefox:

xhr.addEventListener('progress', function(e) { console.log('progress'); }, false);

Halcyon · Accepted Answer · 2013-04-16 13:56:50Z

0

I checked my implementation I'm adding the progress event after I call xhr.open, maybe that fixes it?

Try the 2nd code sample here: https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress does that work?

edited Apr 16, 2013 at 13:56

answered Apr 16, 2013 at 13:51

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

2 Comments

Linas Over a year ago

Well i have tried that and still nothing. In that example there is a note which says:

Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.

So I think I did it the right way

mindplay.dk Over a year ago

The link you posted demonstrates download progress, not upload progress.

Collectives™ on Stack Overflow

Ajax file upload progress event not firing

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related