In JavaScript How to Make a "Click" Event Fire Programmatically For a File Input Element

In JavaScript can I make a click event fire programmatically for a file input element?

You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.

When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.

I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.

trigger click on input file

It's a security feature. Some browsers don't allow a non-manual click on file inputs. You can read more about it here and here.

Why isn't it possible to programmatically trigger the file input selection?

Most browsers prevent submitting files when the input field didn't
receive a direct click (or keyboard) event as a security precaution.
Some browsers (e.g. Google Chrome) simply prevent the click event,
while e.g. Internet Explorer doesn't submit any files that have been
selected by a programmatically triggered file input field. Firefox 4
(and later) is so far the only browser with full support for invoking
"click"-Events on a completely hidden (display: none) file input
field.

Fire onchange event on input type file programmatically

Instead of using another input you could use label to get your desire style. Here is an example

Programmatically generated/activated file input doesn't always fire `input` event

It seems this is a browser bug/fluke and likely has something to do with garbage collection. I can get around it by adding the file input to the document:

fileInputEl.style.display = 'none';
document.querySelector('body').appendChild(fileInputEl);

When done, it can be cleaned up with:

fileInputEl.remove();

Programmatically trigger select file dialog box

If you're looking to have your own button to upload a file instead of using <input type="file" />, you can do something like:

<input id="myInput" type="file" style="visibility:hidden" />
<input type="button" value="Show Dialog" onclick="$('#myInput').click();" />

Note that I used visibility: hidden, instead of display: none. You cannot call the click event on a non-displayed file input.

Trigger input file click event in AngularJS

You can simply use

 <button type="button" onclick="document.getElementById('input').click()">Click me!</button>

OR

$scope.click = function() {
    setTimeout(function() {
        document.getElementById('input').click()
        $scope.clicked = true;
    }, 0);
};

Why triggering a click event on a file input will trigger also submit event on form?

Solved. Just use a evt.preventDefault() in the upload click event handler.

Updated fiddle: http://jsfiddle.net/Ebcu5/2/

document.getElementById('upload').addEventListener('click',function(evt){
                evt.preventDefault();
    document.getElementById('file').click();
});

---

Related Topics