Ok so I have an input element of type file and id "test"

When I put in the address bar: javascript: document.getElementById("test").click() it brings up the open file dialog so the user can decide what to upload. However if this same exact line is inserted into the document or done in the console of chrome it does not bring up the open file dialog. In fact the console says that the click() function is undefined. Is there any way in chrome to do this?

Cause it seem to work fine for any of the other browsers

Ok so I have an input element of type file and id "test"

When I put in the address bar: javascript: document.getElementById("test").click() it brings up the open file dialog so the user can decide what to upload. However if this same exact line is inserted into the document or done in the console of chrome it does not bring up the open file dialog. In fact the console says that the click() function is undefined. Is there any way in chrome to do this?

Cause it seem to work fine for any of the other browsers

• javascript
• google-chrome

• what you're seeing as undefined is the return value of document.getElementById("test").click() and not the actual function being undefined. – Ravikiran Commented Feb 3, 2011 at 15:47

2 Answers 2

You should wrap file-input element to other (ex.:div): HTTM:

<div>
<input type='file'>
<div>

CSS:

div{
height:1px;
overflow: hidden;
}

JS:

$('div input').click();

Good luck...

I had the same problem and managed to solve it(though I am using jQuery). I detailed the technique in another question

Jquery trigger file input

The idea was essentially to focus the file input before triggering the click programatically.