Please check my previous post of “How to Upload Files with HTML5 File API and XMLHttpRequest(XHR)”
While I was implementing abort functionality, I came across an issue that the Chrome Browser did not allow aborting a request when multiple files are being uploaded. And this turned out to be a bug
http://code.google.com/p/chromium/issues/detail?id=154643
https://bugs.webkit.org/show_bug.cgi?id=106937
The bug reports explain that it’s something to do with cached resource. So it tried to make every POST request to be unique. As I don’t allow the user to select files that has same names, I was able to make the XHR request unique with appending the file name in each request.
The initial one was:
xhr.open('POST', "", true);After the modification:
xhr.open('POST', "?upid=" + file.name, true);here, ‘upid’ is just a parameter name that I use .
So the code that makes the XHR request would be
if ($.browser.chrome) { try { /* * XHR.abort() is not working properly in Chrome ( aborting * a file upload while uploading multiple files parallely) */ // Bug // :http://code.google.com/p/chromium/issues/detail?id=154643 // Bug :http://trac.webkit.org/changeset/140174 // Bug :https://bugs.webkit.org/show_bug.cgi?id=106937 xhr.open('POST', "?upid=" + file.name, true); xhr.send(formData); } catch (e) { } } else { xhr.open('POST', "", true); xhr.send(formData); }This approach really worked for me and hope it helps you too