triggering click on file input (Firefox)

[Rob Lifford]

I know pretty much all browsers have prevented setting the value of an HTML file input from JS, and I'd always assumed that they wouldn't let you trigger a click event on one (to open the native file picker), but while working on a global uploader for our app I discovered that, at least with jQuery, you can force the click and open the file picker as long as file input is not set to display:none—apparently it's OK if it's absolutely positioned out of the field of view.

Here's a jQuery version, where the file picker dialog can be triggered in current Chrome/Firefox/IE9: http://jsfiddle.net/DSARd/182/

Here's a bean (via jeesh) version, where it works in Chrome & IE9 but not Firefox:
http://jsfiddle.net/NkycS/2/

I'm about to look closely at the differences between how jQuery & Bean trigger events, but thought I'd log this as an issue just in case bean devs know offhand exactly why this is and can pull me out of the rabbit hole before I get lost down there.

(I am aware of the common alternate approach to custom file inputs, where you position a file input with its opacity set to 0 directly over some other element, but in my specific use case, triggering the click would be preferable for a couple reasons.)

[Rob Lifford]

Actually, switching from trigger('click') to get(0).click() made this work across my target browsers. Love it when the easy option works.

Ref: http://jsfiddle.net/NkycS/3/

[Jany Koščo]

Hi Rob, thanks for this small guide. You saved me some time.

[Rob Lifford]

Great; glad to hear it, s7anley!

[Marc Fowler]

Few years later, and this just helped me out. Thanks guys!