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

Question

Instead of using the tag I\'d like to have a button that launches a file browser dialog.

My first thought was to have a hidd

Answer 1

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 2

You can do it without any security issues. Just code that on onmouseenter will promote the zindex of the real upload button (you can use opacity on it or make it transparent) and then you will not need to trigger a click but just use the click from the user.

Answer 3

Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like 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

I'd rather avoid transparency tricks.

This worked for me (uses jQuery):

$("#upload-box").change(function(){
    $("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
    $("#upload-box").click();
});

And the HTML:

<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />

It creates a text input, and a hidden upload input, and patches (=routes) the click on the text input to the hidden file input.

When a file is selected, it will write back the name of the file in the text input, in line with what most users would expect from the interface.

Should work on FF, Chrome, IE9 and +. I didn't test it on IE8.

Here's a jsfiddle. Thank you for upvoting my answer if you like it.

Answer 5

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