AngularJS error: $apply already in progress

Question

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.

possible duplicate of [Prevent error $digest already in progress when calling $scope.$apply()](http://stackoverflow.com/questions/12729122/prevent-error-digest-already-in-progress-when-calling-scope-apply) — floribon, Mar 09 '15 at 19:08
@floribon this is not a duplicate because it´s not the same case, I´m not calling $apply by myself. — Rober, Mar 09 '15 at 19:22
@tymeJV you are right. You mean this should be in a directive, right? Anyway, do you think this is root cause if the problem. I don´t think so, because, as I told in the post that controller is been called from another buttons and it´s working. — Rober, Mar 09 '15 at 19:24
@Rober hm, ok I removed the vote, yet somewhere the code is trying to run a digest cycle when one is already in progress. I would suggest reusing a directive instead of trying to write your own (or at least read its code) https://github.com/danialfarid/ng-file-upload — floribon, Mar 09 '15 at 20:46

score 0 · Accepted Answer · answered Mar 09 '15 at 19:20

0

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

answered Mar 09 '15 at 19:20

Arman Mukatov

140
1
9

What should I do? Put it in a directive? – Rober Mar 09 '15 at 19:27
I created a directive. – Rober Mar 09 '15 at 19:59

AngularJS error: $apply already in progress

1 Answers1