FormData in IE 11 not defined

Question

I have the following script to get the file data from a input type of file:

var uploadfiles = $("#upFile").get(0);
var uploadedfiles = uploadfiles.files;

var fromdata = new FormData();
for (var i = 0; i < uploadedfiles.length; i++) {
    fromdata.append(uploadedfiles[i].name, uploadedfiles[i]);
}

// ajax code omitted that uploads file

This works great in all browsers I have tested with, except IE 11. In this it doesn't understand what FormData() is?? I have read quite a few different workarounds online now but NONE of them work, whatever I try nothing is able to get the details of the file from the input. Has anyone else had this that can help? Even if I try using jQuery to get the object then the 'files' is undefined for some reason.

EDIT: Reading more online, it seems it could be because IE doesn't give access to the input until the form has been submitted, however I am using ajax to upload the file so I can't really submit it.

EDIT2: I should also mention that this code is called on the change event of the file input, not sure if it has any relevance but best to mention it

Answer 1

FormData is not fully supported on IE11.

To be specific: FormData instance does not have method 'set'. You need to use append method instead, as follows:

const formData = new FormData();
formData.append('your_key_name', 'your_value_goes_here');

Setting meta http-equiv to IE=edge will not make 'set' property work and is not needed.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Answer 2

After checking docmode in IE developer tools it turned out it was reverted to 9 for some reason, had an older meta tag for X-UA-Compatible on my master page which I changed to:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

And FormData had no problems at all.