In JavaScript is it possible to launch a file browser dialog programatically?

Question

Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.

My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.

So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?

This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.

Answer 1

Yes, it's possible (in most browsers) via opacity. Here's a tutorial.

Answer 2

I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).

Answer 3

Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like http://swfupload.org/'>SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.

You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).

Answer 4

It is possible to skin the dropdown without using Flash. Shaun Inman has a great tutorial on the matter:

http://www.shauninman.com/archive/2007/09/10/styling%5Ffile%5Finputs%5Fwith%5Fcss%5Fand%5Fthe%5Fdom