How can I programmatically open the file picker with JavaScript? [duplicate]

Question

Possible Duplicate:
In JavaScript can I make a “click” event fire programmatically for a file input element?

I have naively tried the following to open the file picker programmatically with JavaScript (see fiddle here):

<input type='file'>

<script>
    $(function () {
        $('input').click();
    });
</script>

The above doesn't work. How can I open the file picker of a input type='file' with JavaScript?

But your example is jQuery? If it doesn't matter, do a native DOM method version as an example. — Jared Farrish
– Jared Farrish, Commented Aug 26, 2012 at 21:26
What is the purpose of doing this? Do you want to hide the default input, so that you can style some other element to trigger the dialog, or why? — Christofer Eliasson
– Christofer Eliasson, Commented Aug 26, 2012 at 21:31

The Alpha · Accepted Answer · 2012-08-26 21:33:08Z

14

For security reasons you can't trigger the dialog, unless it is as a response to some user triggered event. You could for instance trigger the dialog through a click on some other element:

$(function () {
    $(".someElement").click(function () {
        $('#f').click();
    });
});

Working example.

edited Aug 26, 2012 at 21:33

The Alpha

147k30 gold badges294 silver badges313 bronze badges

answered Aug 26, 2012 at 21:29

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

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

Comments

pimvdb · Accepted Answer · 2012-08-26 21:28:19Z

5

As a security measure, you can only open such dialogs on an user input, such as a click event (on whatever element). You cannot open it randomly such as on page load.

http://jsfiddle.net/fEBFp/2/

answered Aug 26, 2012 at 21:28

pimvdb

155k80 gold badges313 silver badges357 bronze badges

3 Comments

Jared Farrish Over a year ago

I think it's it's a little odd there's no security exception in the console, though.

Fabrício Matté Over a year ago

Responding to user input works fine cross-browser, just one thing though. If the file input has display:none or visibility:hidden, the dialog may not open in older browsers. Here's a fiddle using an example of alternative masking without display/visibility CSS.

Robert Over a year ago

Thank you. In Chrome I put the file input into a 0x0px div now. In Firefox it's not even necessary to insert the file input into the document.

Collectives™ on Stack Overflow

How can I programmatically open the file picker with JavaScript? [duplicate]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related