Chrome’s XMLHttpRequest (XHR ) abort issue while uploading multiple files.

I developed a file uploading component using HTML5 File API and XMLHttpRequest(XHR) .One of the main requirements was, the user should be able to abort/cancel one or more uploading request from the list of files that are being uploaded.

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