Getting $rootScope:inprog error when calling click method of input type file programmatically

Question

I want to create custom file upload component . I did following code in html

HTML CODE

<input id="upload" type="file" style="display: none;">// don`t want to render default
<button class="parimarybtnVD" type="button" ng-click="clickUpload()">Browse</button>

JS CODE

$scope.clickUpload = function() {
    angular.element('#upload').trigger('click');
};

But getting following error when I clicked 'button'.

           Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.16/$rootScope/inprog?p0=%24apply
at Error (<anonymous>)
at http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:6:450
at l (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:102:171)
at h.$digest (http://localhost:7001/RightsWeb/scripts/resource/angular.min.js:105:497)
at HTMLDocument.D (http://localhost:7001/RightsWeb/scripts/utill/ui-bootstrap-tpls-0.11.0.min.js:9:14775)
at HTMLDocument.f.event.dispatch (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:4351)
at HTMLDocument.h.handle.i (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:328)
at Object.f.event.trigger (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:3:3038)
at <error: TypeError: Accessing selectionDirection on an input element that cannot have a selection.>
at Function.e.extend.each (http://localhost:7001/RightsWeb/extResources/jquery/jquery-1.7.1.min.js:2:11937) 

Could anyone tell me why I am getting this error ? If there is better way of doing custom file upload in angularjs please tell .Thanks in Advance.

Answer 1

In angular at any point in time there can be only one $digest or $apply operation in progress.

Use $timeout.

$scope.clickUpload = function() {
    $timeout(function() {
        angular.element('#upload').trigger('click');
    }, 1);
};

OR, I would suggest you to use

<button 
    class="parimarybtnVD" 
    type="button" 
    onclick="document.getElementById('upload').click()">Browse</button>

Answer 2

I know this is old, but I faced the same problem, and I would like to offer another solution, although the $timeout solution worked for me as well. In general, I don't like to use it unless it's absolutely necessary; and in this case it really isn't.

This apply error here happens because when you call the angular.element('#upload').trigger('click'); method inside the clickUpload method, angularjs hasn't finished the digest cycle until the function returns, but we go ahead and perform another click programmatically which triggers another digest, so basically, the only thing we need to do is wait for the digest to finish (which is kind of what the $timeout does except it does that because it lets the method return before initiating the click), this can be done using $scope.$$postDigest

Which means changing the code to the following:

$scope.clickUpload = function() {
    $scope.$$postDigest(function() {
        angular.element('#upload').trigger('click');
    });
};

In my opinion it is the cleaner approach, because the $scope.$$postDigest is designated to wait for the current digest cycle whereas $timeout solves the issue because it runs the click after the clickUpload returns