Drag'n'drop - Error: $digest already in progress

[tihomir-kit]

Hi,

I wanted to wrap your angular-file-upload directive within my own directive, and it works fine except the drag'n'drop area. The error I'm getting when the drag'n'drop input is inside my directives view template is: "$digest already in progress" (angular-file-upload.js ln.117).

scope.$apply(function() {

I did a bit of research and found this SO article.

Basically, adding $timeout to 'ngFileDropAvailable' fixed the issue. This is the original method:

angularFileUpload.directive('ngFileDropAvailable', [ '$parse', '$http', function($parse, $http) {
    return function(scope, elem, attr) {
        if ('draggable' in document.createElement('span')) {
            var fn = $parse(attr['ngFileDropAvailable']);
            if(!scope.$$phase) {
                scope.$apply(function() {
                    fn(scope);
                });
            } else {
                fn(scope)
            }
        }
    };
} ]);

and this is the fixed one:

angularFileUpload.directive('ngFileDropAvailable', ['$parse', '$http', '$timeout', function ($parse, $http, $timeout) {
    return function (scope, elem, attr) {
        if ('draggable' in document.createElement('span')) {
            var fn = $parse(attr['ngFileDropAvailable']);
            if (!scope.$$phase) {
                $timeout(function () {
                    scope.$apply(function () {
                        fn(scope);
                    });
                });
            } else {
                fn(scope)
            }
        }
    };
}]);

My project is on v1.0.7 of angular, so perhaps that's why I'm getting this error, but I believe $timeout shouldn't break anything for newer versions of angular either if implemented into your directive. So perhaps you could add the timeout fix to patch this up? I could also submit this as a patch.

Thnx :)

[danialfarid]

Could you please verify if this would fix the issue instead of timeout:

if ('draggable' in document.createElement('span')) {
    $parse(attr['ngFileDropAvailable'])(scope);
    if(!scope.$$phase) {
        scope.$apply()
    }
}

[tihomir-kit]

Sure, I'll check it out tomorrow morning and then I'll get back to you. Thnx for the reply.

[tihomir-kit]

Hi, your fix does show the drag'n'drop area, but the console still shows the $digest error.

[danialfarid]

I fixed the $scope.$apply issues at 1.1.10