Remco Haszing Remco Haszing - 1 year ago 106
HTML Question

Trigger input file click event in AngularJS

I am trying to emulate a click event on a file input in AngularJS. I have seen working jQuery examples, but I don't want to use jQuery.

'use strict';

angular.module('MyApp', []).

controller('MyCtrl', function($scope) {
$ = function() {
setTimeout(function() {
var element = angular.element(document.getElementById('input'));
$scope.clicked = true;
}, 0);

<script src=""></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<input id="input" type="file"/>
<button ng-click="click()">Click me!</button>
<div ng-if="clicked">Clicked</div>

Note: For some reason the button needs to be pressed twice in order to trigger the timeout function.

I am using
because of this post.

How do I programmatically click a file input with just AngularJS / vanilla JavaScript?

Answer Source

You can simply use

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


$ = function() {
    setTimeout(function() {
        $scope.clicked = true;
    }, 0);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download