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() {

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?

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.

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

$('#button').click(function() {

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.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   nodeJS - where exactly can I put the Content Security Policy

Similar Posts