Linas Linas - 12 days ago 5
Javascript Question

Ajax file upload progress event not firing

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.

Answer

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?

Comments