FormData of existing form fails in IE10 by triggering via JS

Question

I am just creating a webapp using the new FormData class HTML5 provides.

To have a custom styled "choose your file" button I want to trigger the click event on the file-input element via javascript.

This works on IE10 and Chrome, but when I try to create a FormData instance using the form it fails in IE10 with the message "SCRIPT5 'Access Denied'" on this line:

var fd = new FormData(f.get(0));

If I trigger the file open dialog using the native input element it works in IE10 as well.

For testing, see this jsfiddle: http://jsfiddle.net/s9aTg/2/

Is there an option to make this work in IE10 or am I stuck with the ugly default "choose-file" button?

Thanks in advance, McFarlane

Answer 1

Another workaround:

var input = document.querySelector('input[type=file]');
var fd = new FormData();
for (var i = 0, l = input.files.length; i < l; i++) {
    fd.append('file', input.files[i]);
}

It works even if files are chosen after click on a styled button.