Triggering a click event from within an angularjs function causes an error

Question

I'm getting the error

[$rootScope:inprog] $apply already in progress

whenever I trigger a click event on a hidden file upload input.

HTML:

<!-- button that calls function in controller -->
<button type="button" ng-click="uploadClicked()">Upload</button>
<!-- Upload input I'm triggering the click event on -->
<input type="file" accept="image/*" id="profile-photo" name="profile-photo" ng-hide="true"/>

AngularJS function in controller:

$scope.uploadClicked = function () {
    //Causes Error: [$rootScope:inprog] $apply already in progress and opens file dialog
    document.getElementById('profile-photo').click();

    //Causes Error: [$rootScope:inprog] $apply already in progress and does not open file dialog
    $('#profile-photo').trigger('click');
};

I'm not calling $apply or $digest anywhere in my controller. Why would this error be occurring?

Because angularjs does some actions in the background and your tiggered click conflicts at that place. — t.niese
– t.niese, Commented Jan 3, 2015 at 11:11
That's rather unfortunate. Any advice on how to circumvent this? — Jack Zach Tibbles
– Jack Zach Tibbles, Commented Jan 3, 2015 at 11:12
@justine have you had any luck with this ?I am facing the same issue.I am manually clicking on a hidden link for downloading and this error is thrown then.Please update — Divya MV
– Divya MV, Commented Mar 3, 2015 at 9:51

Divya MV · Accepted Answer · 2020-05-21 09:52:03Z

4

I just got a similar issue and i was able to fix that by wrapping the place where we click with a

 setTimeout(function(){uploadClicked();},0);

the angular version would be

$timeout(function(){uploadClicked();},0);

By using angular version, Angular will be aware and will not initialize another digest cycle on finding a click event.

edited May 21, 2020 at 9:52

answered Mar 3, 2015 at 10:02

Divya MV

2,0514 gold badges34 silver badges59 bronze badges

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

2 Comments

Mathias Conradt Over a year ago

It should be setTimeout, not setTimeOut (no capital O).

Tom Over a year ago

Actually, it would be $timeout(function() { uploadClicked(); }) these days

Collectives™ on Stack Overflow

Triggering a click event from within an angularjs function causes an error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related