I’ve recently been working with the XHR FormData object to build an upload management tool. When testing in IE10 (which supports FormData) I ran into a bizarre error (“SCRIPT5 ‘Access Denied”) on this line:

var upload_form = new FormData(form);

A rather useful Stack Overflow discussion suggested appending the data. Indeed Microsoft’s MSDN article doesn’t seem to mention the element (‘form’ in my example) argument for FormData that other modern browsers support.

Appending lots of things

The Stack Overflow method works well for appending multiple files from one file input, but I had the requirement of submitting quite a bit of form data (text inputs and checkboxes) with the files… all at the same time. For this I needed to automate the appending, for which I used MooTools’ Element.toQueryString() and String.parseQueryString() methods:

try {
  // other modern browsers
  var upload_form = new FormData(form);
} catch (e) {
  // IE10 MUST have all form items appended as individual form key / value pairs
  var upload_form = new FormData();
  var form_serialise = form.toQueryString().parseQueryString();
  Object.each(form_serialise, function (item, key) {
    upload_form.append(key, item);
  });
}