Scribd
Upload
374 views2 pages

Javascript - Open File Upload Dialog On Click - Stack Overflow PDF

This document discusses programmatically opening the file upload dialog from a button click in different browsers. It describes code that hides the file input and triggers its click handler from another button. While this works in some older browsers, it does not work consistently across browsers. Suggestions are made to directly bind the click handler to the file input instead of triggering its click programmatically, and to style the file input to be visible and clickable.

Uploaded by

spareroommedia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
374 views2 pages

Javascript - Open File Upload Dialog On Click - Stack Overflow PDF

This document discusses programmatically opening the file upload dialog from a button click in different browsers. It describes code that hides the file input and triggers its click handler from another button. While this works in some older browsers, it does not work consistently across browsers. Suggestions are made to directly bind the click handler to the file input instead of triggering its click programmatically, and to style the file input to be visible and clickable.

Uploaded by

spareroommedia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

javascript - open file upload dialog on click - Stack Overflow 5/30/17, 5)27 PM

x Dismiss

Join the Stack Overflow Community

Stack Overflow is a community of 7.2 million


programmers, just like you, helping each other.
Join them; it only takes a minute:

Sign up

open file upload dialog on click

I have to open file upload dialog by clicking some other button i.e i am hiding file upload control(visibility:hidden) and on clicking of some other
button i want to open that dialog. Below is the code which i am having:

<input type="file" style="visibility: hidden;" />

Below is the javascript:

$('#button').click(function() {
$('input[type=file]').click();
});

It is working fine in Firefox 4 and IE8 but in chrome12 it is not working i.e the dialog is not being opened. Any idea why?

javascript jquery html file-upload

edited Jul 29 '15 at 16:28 asked Jun 9 '11 at 12:32


Rory McCrossan Niraj Choubey
187k 25 157 203 937 12 42 84

3 Answers

Tested today the simple code given in the question and the situation has changed:

IE9: works
Chrome23: works
Firefox15: works

There is just one catch - on IE the .click() is a blocking operation while on other
browsers it is not.

edited Feb 20 '13 at 8:02 answered Nov 16 '12 at 13:51


Knais
14.3k 1 37 64

can you explain more what do u mean by blocking operation? william Jul 4 '13 at 8:58

fileElement.click(); var x = fileElement.value; - on IE this will work as expected, but on other


browsers x will be empty. Knais Jul 4 '13 at 17:43

In your example, your file input did not have an id, yet you are trying to reference it with #input.

https://stackoverflow.com/questions/6292825/open-file-upload-dialog-on-click Page 1 of 2
javascript - open file upload dialog on click - Stack Overflow 5/30/17, 5)27 PM

This works for me:

$('#button').click(function() {
$('input[type=file]').click();
});

answered Jun 9 '11 at 12:38


circusbred
1,166 7 8

Sorry, i removed it. Niraj Choubey Jun 9 '11 at 12:40

1 actually this doesn't work as of now, either from updates to jquery either from browser updates
Nuno Furtado Feb 4 '13 at 15:22

You should position input[file] just above your custom control. And then bind to
it`s onclick.

Also make in it bigger font-size, as only this way you can increase it's height.

answered Jun 9 '11 at 12:36


gaRex
3,078 13 31

https://stackoverflow.com/questions/6292825/open-file-upload-dialog-on-click Page 2 of 2

You might also like