Triggering click with jquery on hidden input-file tag

Question

I am testing this idea of using a div on top of an invisible <input type="file" /> so I can make a fancy file uploading button. I have seen some code around but was somewhat complicated. I thought of trying this idea of using jQuery to trigger the click of the input tag from its div container

Html:

<div id="container">&nbsp;Click Me!&nbsp;
    <input type="file" id="file" />
</div>

Javascript:

$(document).ready( function() {
    $('#container').click( function() {
        $('#file')[0].click();
    })
});

Although the code runs OK on Chrome and IE, it does not run on Safari and it has a funny problem with Firefox: it triggers the click twice! Any idea why this is so? jQuery is supposed to be cross-platform and I am puzzled. Here is the fiddle

http://jsfiddle.net/kostasd/C4sCs/1/

Thanks in advance for any help!

Kostas

Answer 1

The different Possible Solutions which I tried are

• Using Visiblity:hidden; width:1px; for the File input element.

The jsfiddle for it is as follow http://jsfiddle.net/C4sCs/36/

• Using only the Css to call the file input click and not using jquery at all

  #container {
  border:1px solid #b0b0b0;
  display: inline-block;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  }
  #file {  
  position:absolute;
  top:0;
  opacity:0;
  display:block;
  }
  

http://jsfiddle.net/C4sCs/42/