Trigger input[type=file] via javascript

Question

I'm trying to trigger the click event of an <input type="file" /> via javascript (onclick the file selection dialogue should open). So far I've tried:

$('#uploadFile').trigger('click')
.trigger('submit')
.submit()
.post(); // Stacked for brevity

No dice.

Is there something special about this input that prevents these approaches from working?

Here's a Fiddle.

AmmarCSE · Accepted Answer · 2016-10-10 13:03:49Z

4

some of the default actions of events are prevented by the browser if the event is triggered by a script and is not done in a user initialized thread for security reasons.

See it working if it is triggered from a another click handler(User has to click the button)

$('button').click(function(){
    $('#uploadFile').trigger('click')
})

Demo: Fiddle

edited Oct 10, 2016 at 13:03

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

answered Jan 6, 2014 at 2:42

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

monners Over a year ago

Yep, that did the trick. Any comments on cross-browser support?

Arun P Johny Over a year ago

@monners it should be fine if you don't have a on change handler in the file input where you submit a form

monners Over a year ago

that's a good point, and that might be an issue, but this is more than enough to get me started. Thanks @ArunPJohny

Joeytje50 Over a year ago

Instead of this script, you can also use <label for="uploadFile">this</label> to trigger the file button on click.

Collectives™ on Stack Overflow

Trigger input[type=file] via javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related