Trigger input file click event in AngularJS

Question

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) {
  $scope.click = function() {
    setTimeout(function() {
      var element = angular.element(document.getElementById('input'));
      element.triggerHandler('click');
      $scope.clicked = true;
    }, 0);
  };
});

<script src="https://code.angularjs.org/1.3.14/angular.js"></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>
</div>

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

I am using setTimeout because of this post.

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

The code in the question as well as the proposed answer is a well-known anti-pattern in Angular.js - don't do DOM manipulation in your controllers, unless it's in a directive controller. — yangmillstheory
– yangmillstheory, Commented Feb 17, 2016 at 22:13

Satpal · Accepted Answer · 2015-02-27 10:18:56Z

42

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);
};

answered Feb 27, 2015 at 10:18

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liad Livnat Over a year ago

Hi, sometimes it's opened multiple times, any way to prevent that ?

serv-bot 22 Over a year ago

I'm sure @LiadLivnat already solved his issue, but just in case anyone stumbles upon this and has the same issue; This happens when you put the <input> inside the element that's supposed to trigger the click on input. <div onClick="document.getElementById('input').click()"><input/></div> will trigger infinite clicks on that element. <input/><div onClick="document.getElementById('input').click()"></div> works just fine :)

Abdallah Okasha · Accepted Answer · 2017-12-05 07:31:11Z

0

Here's how to trigger file of type 'file' or open select-file window when click on icon, button or span as you like ;)

css :

.attachImageForCommentsIcon{
  padding-top: 14px;
  padding-right: 6px;
  outline:none;
  cursor:pointer;
}

HTML :

<input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>

all credits goes for this answer : https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

Thus, we customized file input tag using this way.

answered Dec 5, 2017 at 7:31

Abdallah Okasha

2,19920 silver badges20 bronze badges

1 Comment

Albert Hendriks Over a year ago

That looks like jQuery (OP doesn't want to use jQuery).

Collectives™ on Stack Overflow

Trigger input file click event in AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related