AngularJS error: $apply already in progress

Issue

I have this AngularJS 1.0.7 code that is using angular-file-upload plugin to upload photos:

HTML:

<div ng-hide="user.mainPhoto" style="margin-top: 20px">
    <center>
        <div ng-controller="FileUploadCtrl">
             <button class="btn btn-success btn-primary" ng-click="clickFileInput('addMainPhoto')"><i class="fa-icon-picture"  style="vertical-align: middle"></i> {{'ADD_PROFILE_PHOTO' | translate}}</button>
        </div>
    </center>                       
    <input id="addMainPhoto" type="file" ng-file-select="onFileSelect($files, 'user', user.id)" class="hidden" accept="image/*">                        
</div>

CONTROLLER:

.controller('FileUploadCtrl', function ($scope, $upload, growl, API_SERVER_URL, ngProgress, PhotoService) {

      $scope.clickFileInput = function(id){
        $('#' + id).trigger('click');
      };

      $scope.onFileSelect = function($files, entity, id, action) {
        //$files: an array of files selected, each file has name, size, and type.
        console.log("BoatPhotoUploadCtrl-->entity:" + entity + "; id:" + id);
  ...

When I click on the upload button, I get next error:

Error: $apply already in progress
        at Error (native)
        at beginPhase (http://localhost/lib/angular/angular.js:8334:40)
        at Object.$get.Scope.$digest (http://localhost/lib/angular/angular.js:7913:9)
        at HTMLDocument.link.T (http://localhost/lib/bootstrap/ui-bootstrap-tpls-0.6.0.min.js:1565:34)
        at HTMLDocument.x.event.dispatch (http://code.jquery.com/jquery-1.10.2.min.js:5:14129)
        at HTMLDocument.x.event.add.v.handle (http://code.jquery.com/jquery-1.10.2.min.js:5:10873)
        at Object.x.event.trigger (http://code.jquery.com/jquery-1.10.2.min.js:5:13255)
        at HTMLInputElement.<anonymous> (http://code.jquery.com/jquery-1.10.2.min.js:5:20776)
        at Function.x.extend.each (http://code.jquery.com/jquery-1.10.2.min.js:4:5347)
        at x.fn.x.each (http://code.jquery.com/jquery-1.10.2.min.js:4:1999)

I´m not using $apply by myself, and it´s quite strange because I´m using same plugin to upload photos in other part of the application and it´s working fine.

Solution

$('#' + id).trigger('click'); - this line causes an error

Answered By – Arman Mukatov

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.