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

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.

It worked for me... see my answer below. Maybe it's a browser compatibility thing. This question is 6 years old. — Rolf
– Rolf, Commented Jan 15, 2014 at 14:08

ceejayoz · Accepted Answer · 2008-10-16 17:27:58Z

11

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

answered Oct 16, 2008 at 17:27

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

eyelidlessness Over a year ago

Note that this is a security issue and action may be taken to prevent this in future browsers.

Kon Over a year ago

Possible? Yes. Recommended? No. Security issue? Definitely.

user28655 Over a year ago

I've checked this out and it doesn't do quite what I want it to. And with the potential security/deprecation issues I won't be using it. Thanks for the response though.

Brenden Over a year ago

How is this a security issue? It simply allows you to control the presentation of the file selection UI widget. It still depends on the user's action.

ceejayoz Over a year ago

It's called clickjacking and can be used to make people click on things like invisible Facebook Like buttons.

eyelidlessness · Accepted Answer · 2008-10-16 17:32:45Z

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

answered Oct 16, 2008 at 17:32

eyelidlessness

63.6k12 gold badges93 silver badges95 bronze badges

2 Comments

Jannick Over a year ago

Before using flash or a java applet you should always use the plain form.

eyelidlessness Over a year ago

@Jan, that's what I said in my answer: "progressively enhance" means that you begin with the plain HTML and enhance it on the client side (JS, Flash, whatever) after load.

Quamis · Accepted Answer · 2012-06-20 12:27:13Z

1

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

edited Jun 20, 2012 at 12:27

Quamis

11.2k13 gold badges54 silver badges67 bronze badges

answered Oct 16, 2008 at 17:52

Daniel Beardsley

20.5k21 gold badges69 silver badges79 bronze badges

Comments

Rolf · Accepted Answer · 2014-01-15 14:10:10Z

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.

it returning only the file name but how to get the whole path of the file like c:/test.png
@jerith2, you can't get the full path and it would not be useful anyway. You can read the file with a FileReader object if you want to see the binary data of the file (which you can convert to any other data as required.)

Migo Kedem · Accepted Answer · 2014-01-15 09:15:43Z

0

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.

answered Jan 15, 2014 at 9:15

Migo Kedem

112 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

2 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

Comments

2 Comments

Comments

Linked

Related