Getting TypeError: Illegal invocation with ngf-drop

I am using version 4.1.4 with the following HTML snippet to support collection of files:

`

<div id="designFileDropArea" ngf-drop ng-model="designFiles" class="col-md-6 dropArea" ngf-drag-over-class="dropHover" ngf-multiple="true" ngf-allow-dir="false" ngf-accept="'*.doc,*.docx,*.xls,*.xlsx,*.pdf'" ngf-hide-on-drop-not-available="true" style="margin: 0em 0em 1em 1em;"> Drop file(s) here </div>

`

Unfortunately, this generates errors when dropping a file during assignment to the ng-model:

`TypeError: Illegal invocation at equals (angular.js:1034) at equals (angular.js:1019) at Scope.$get.Scope.$digest (angular.js:15550) at Scope.$get.Scope.$apply (angular.js:15824) at angular.js:17580 at completeOutstandingRequest (angular.js:5370) at angular.js:5642(anonymous function) @ angular.js:12221$get @ angular.js:9055$get.Scope.$digest @ angular.js:15574$get.Scope.$apply @ angular.js:15824(anonymous function) @ angular.js:17580completeOutstandingRequest @ angular.js:5370(anonymous function) @ angular.js:5642 angular.js:12221

TypeError: Illegal invocation at equals (angular.js:1034) at equals (angular.js:1019) at Scope.$get.Scope.$digest (angular.js:15550) at Scope.$get.Scope.$apply (angular.js:15824) at NgModelController.$$debounceViewValueCommit (angular.js:24919) at NgModelController.$setViewValue (angular.js:24891) at ng-file-upload.js:547 at angular.js:17571 at completeOutstandingRequest (angular.js:5370) at angular.js:5642(anonymous function) @ angular.js:12221$get @ angular.js:9055$get.Scope.$digest @ angular.js:15574$get.Scope.$apply @ angular.js:15824NgModelController.$$debounceViewValueCommit @ angular.js:24919NgModelController.$setViewValue @ angular.js:24891(anonymous function) @ ng-file-upload.js:547(anonymous function) @ angular.js:17571completeOutstandingRequest @ angular.js:5370(anonymous function) @ angular.js:5642 angular.js:12221

TypeError: Illegal invocation at equals (angular.js:1034) at equals (angular.js:1019) at Scope.$get.Scope.$digest (angular.js:15550) at Scope.$get.Scope.$apply (angular.js:15824) at angular.js:17580 at completeOutstandingRequest (angular.js:5370) at angular.js:5642(anonymous function) @ angular.js:12221$get @ angular.js:9055$get.Scope.$digest @ angular.js:15574$get.Scope.$apply @ angular.js:15824(anonymous function) @ angular.js:17580completeOutstandingRequest @ angular.js:5370(anonymous function) @ angular.js:5642 44angular.js:12221

TypeError: Illegal invocation at equals (angular.js:1034) at equals (angular.js:1019) at Scope.$get.Scope.$digest (angular.js:15550) at Scope.$get.Scope.$apply (angular.js:15824) at tick (angular.js:10983)(anonymous function) @ angular.js:12221$get @ angular.js:9055$get.Scope.$digest @ angular.js:15574$get.Scope.$apply @ angular.js:15824tick @ angular.js:10983 `

What am I doing incorrectly?

[skidvd]

I have resolved my issue. Several problems in combination led to it:

1. don’t use both ng-model and ngf-change in combination with each other … choose one approach
2. Build up a list of files in a separate scope variable
3. don’t use a regular $watch with objectEquality true if you need to watch the $scope variable containing list of files, it leads to Illegal Invocation errors - still not entirely sure why on that front. Turns out thought that $watchCollection does not produce this error (why does watch???) … and appears to work as desired in this case
4. while not part of the problem, it led to some confusion, don’t attempt to JSON.stringify a file object

plunk updated to reflect working approach

[bradiosd]

I had an issue with this error when using deep watching too. I stored the temporary files against an array 3 levels deep under a watched object and causes this area. To fix this I now store my files against it’s own variable separately. It’s not the best way of fixing as my files are now delinked from the actual object I am affecting but it will work. Thanks for the help.