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

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.

Collectives™ on Stack Overflow

Trigger input file click event in AngularJS

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related