Question

I am uploading an image from my PC. It is working fine in Firefox, but in Chrome, the dialog to select the file doesn’t open up! I’m invoking click event of input type in Javascript.

Here is what I’m doing:

<input type="file" id="fileElem" accept="image/*" style="display:none" >
<div id="fileSelect" class="drop-area">Select some files</div>

Here is Javascript:

var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");

  
fileElem.addEventListener("click",function(e){
  var files = this.files
  handleFiles(files)
},false)  
  
  
fileSelect.addEventListener("click", function (e) {
    fileElem.click();
  e.preventDefault(); 
}, false);

Answer 1

No browser that I know of lets you simulate click on an <input type="file"> itself without user intervention. The reason is security. Browsers require that a user make an explicit manual click (user-initiated click) somewhere on the page. However, once that happens, it’s straightforward to hijack the click and route it to a file input. This is what you’re trying to do.

See my blob post on the topic. It has a demo that should work: http://ericbidelman.tumblr.com/post/14636214755/making-file-inputs-a-pleasure-to-look-at