CODEWITHSUNDEEP
javascripthtml
user28655
user28655

Reputation: 2853

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

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.

Upvotes: 13

Views: 41797

Answers (5)

Rolf
Rolf

Reputation: 5753

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.

Upvotes: 1

Migo Kedem
Migo Kedem

Reputation: 11

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.

Upvotes: 0

Daniel Beardsley
Daniel Beardsley

Reputation: 20387

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).

Upvotes: 1

eyelidlessness
eyelidlessness

Reputation: 63529

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).

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 180177

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

Upvotes: 11

Related Questions