How to make IE8/9 submit input type="file" when javascript triggered dialog open

Question

If I have an input type="file" somewhere, and on click of some link it also triggers a click on the file input. The user picks a file.

In IE8/9 if the user clicks on a button type="submit" the first click clears all data in the file input, then the second submits a blank form.

How do I allow submission of the input type="file" post a javascript click trigger.

Some notes:

• The click was triggered as a consequence of another click event. Within the event.
• The input type="file" is not set to display: none.
• No attempt to manipulate the user input was done

Ideas?

Answer 1

I've been struggling with the same problem, and I'm yet to come across a clean solution.

I have however, discovered a work-around. Please note the the solutions below completely disregard best practices (in my humble opinion) and if anyone has a better, more standards-compliant way of doing this, please post it here.

Fixing the button click event

After a fair amount of research, it seems a lot of people are using a trick whereby they absolutely position the <input type="file" /> immediately over their button, and set the opacity to zero. This means that, to the user, it looks like they are clicking on a button, but the browser sees it as a click on the <input type="file" /> (and thus avoids the mentioned issue in IE). I was surprised to see that Quirksmode actually recommended this approach.

Fixing the button styles

Now, this does introduce further cosmetic problems; you may find that your buttons no longer trigger their :hover and :active CSS pseudo classes (unless you placed the <input type="file" /> inside your button), and that your mouse cursor will probably be the default mouse cursor, despite any CSS you've applied to your <input type="file" /> or your button.

The classes are easy fix with a JavaScript work-around (I'll leave that to you), but the cursor is still an issue. Strangely, you can style the cursor of the right hand path side of the <input type="file" \>, but this will not affect it's Browse button. Unfortunately this (now transparent) button will probably be over some part of your styled button, resulting in a default cursor on hover.

To solve this, I stumbled across this work-around (JSFiddle here). Basically, someone has bound an event to the mousemove event of their button, and positioned the right-hand side of <input type="file" /> under the mouse cursor every time they hover over the button. This may also need to be enhanced a bit in order to stop the <input type="file" /> from being clicked on from outside of the button's co-ordinates if the button does not have a fixed size and overflow: hidden set.

Conclusion

Overall, I've found that styling <input type="file" /> is just not worth it; there are just too many hacks, and you're probably going to have to use JavaScript at some point if you really want it to look good (not great if you're trying to support people who have JavaScript disabled). I also have no idea how this affect mobile either.

If you're targeting newer browsers that support the Html5 File API, implement an AJAX drag / drop upload solution (here is a nice one), and get rid of the <input type="file" /> altogether. For those that don't support it (older browser and those with JavaScript disabled), just leave the unstyled <input type="file" /> there as a fallback.

Answer 2

I found that using the jquery fileupload extension is just better. It handles the intricacies much much better than I could had I been doing it manually. It basically does what jquery does for x-browser dom manipulation & ajax but for input type="file".