If Internet Explorer does not react to upload click ...

2014-12-09 | #solution, #webdev

The Internet Explorer (tested with 9 and 10 here) does not accept artificially created click-events on file-inputs. So, if you relay a click-event from another element or create one on the fly, you're outta luck. This works in Firefoxes and Webkits, but in no IE, due to "security concerns". Great.

With this wonderful behaviour, there is only one feasible workflow to create styled file-inputs, that behave as expected, bear with me here:

1. The key is using a label for the input, connect to or include the input into the label.

2. Style the label according to your button layout.

3. Set the label (or the container of the input) to relative positioning and hidden overflow and position the input absolutely outside the visible area. Now every click on the label is a native click on the still present input.

4. If you want to be extra super cautious, you could also set the input to opacity to 0.01 and position it not completely outside the container, so that there are still visible pixels of the input in the viewport, which the browser cannot ignore under any circumstances.

If you already have a button, that you can't replicate with a label, put the button and the label in a shared container, position them so that the label is exactly on top of the button, set the label to 0.01 opacity and relay hover-events to the button. Voila.