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.

Answer 2

I can't check, but try to append data.

var formData = new FormData();
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
$.each(files, function () {
  formData.append("files[]", this);
});

Answer 3

IE in its own style, even in version 10 :)

I don't know the solution but maybe this workaround will help you: try to place transparent input element above the styled button.

<span class="open-wrapper">
    <input type="file" name="file" />
    <span class="open">open Dialog</span>
</span>

...

.open-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.open-wrapper input {
    position: absolute;
    right: 0;
    opacity: 0;
}

http://jsfiddle.net/UKV3B/