Internet Explorer 8 and 9 - submitting file uploads via AJAX, work-around for "Access denied" error

So I wrote a nice new social media style app for our intranet that lets you post comments, photos and files in to a feed.  One goal was to make it as simple as possible to add photos. We decided to add a camera icon beneath the text box for composing a new post.  Behind this is a hidden <form> with an <input type="file"> tag. Clicking on the camera icon triggers a click event on the hidden file tag.  When the user uses the file selector on their device to choose a file, this in turn fires the change event for the hidden file tag, which we intercept to post the photo using AJAX - no clicking of form elements or submit buttons involved.

The AJAX script responds with a JSON packet containing the Url to the thumbnail of the uploaded image, so we give the user an instant visual confirmation that their upload was received and attached to their post:

To start with - with a target audience using mainly Chrome, Firefox, IE11 and iOS - it all worked beautifully. But then we decided to perform a wider roll-out of the app to the entire company.  A quick check of the login stats revealed that 30% of our users globally still had either Internet Explorer 8 or 9, so some quick testing was required.

Everything worked fine in IE10, but as soon as I selected a file in IE8 or IE9, the debugger popped up an "Access denied" scripting error.   On looking in to the issue, it seems that Internet Explorer 9 and older won't let you submit a form via JavaScript which contains an <input type="file"> element that was also triggered by JavaScript.  The browser requires that the user clicks on the file selector manually, otherwise you get the "Access denied" error. This was apparently a security feature - so funny how it was dropped with IE10.

A bit more digging revealed that the click could also be on a <label> element attached to the <input type="file"> element, which turned out to be our salvation.

HTML looks like:

 <form>  
  <input id="inputFile" type="file" name="file"/>  
  <label for="inputFile"></label>  
 </form>  

CSS looks like:

 form { position: relative;}  
 form #inputFile {  
  width: 0px; position: absolute; top: -50px;  
 }  
 form label { background-image: url(camera-icon.png); width: 20px; height: 20px; }  

This causes the actual input tag to be 0 pixels wide (Internet Explorer is smart enough to realise if you've just hidden the element with display: none), and also positioned 50 pixels off the top of the form for good measure (well out of the way).

You can style the label element whatever way you like.  We chose to turn it in to a 20px by 20px icon/button.

So there you have it - a cross-browser solution (back as far as Internet Explorer 8 anyway, we don't support 7) and hopefully some happy users who will use it to start to share their knowledge, files and pictures.

Plus the smug satisfaction that you've fooled an old version of Internet Explorer in to letting you do something it thinks you shouldn't :)