On top of the whole X-UA-Compatible (for some obscure value of Compatible) debacle, last week gave me one more reason to hate Internet Explorer: the way it handles injection of file upload fields into the document. I was writing some code to allow an arbitrary number of files to be uploaded, one by one, through a hidden iframe (read: ‘Ajax’ file uploads) and came up against the following.

There are two ways of injecting new HTML into the document. One is with strings and innerHTML, and one is with HTMLElement objects, createElement and appendChild. I was using the latter, via a library I’ve got to make the process much nicer to use:

var form = $.HTML.form({
    action: 'blah', method: 'POST',
    target: 'some_iframe', enctype: 'multipart/form-data'
}, function(HTML) {
    HTML.input({type: 'file', name: 'myFile'});
});

// The same as
var form = document.createElement('form');
form.action = // ...
var input = document.createElement('input');
input.type = //...
form.appendChild(input);

So I create a form for each file, and inject it into the page on demand when the user wants to upload a file. Trouble is, you’ll find that IE passes the filename as a string to the server, instead of the file’s contents, which is a bit of a non-starter. Instead, you need to build the form as a string, and use innerHTML to add it to the document (or some other nice insertion method if your library supports it):

var form = '<form action="blah" method="POST" ' +
        'target="some_iframe" enctype="multipart/form-data">' +
    '<input type="file" name="myFile" />' +
'</form>';

I hate it when IE makes me use hacky, standards-ignorant code. Bah. I did try this trick which I found somewhere via Google:

var input = document.createElement(
        '<input type="file" name="myFile" />');

This didn’t work either, and actually has all the overhead of object creation and string-building combined, so I wasn’t that keen anyway.