ng-file-upload: 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?

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 19 (3 by maintainers)

Most upvoted comments

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

+3
skidvd on May 29, 2015
Read more comments on GitHub
← ng-file-upload: Error: The body of your POST request is not well-formed multipart/form-data.
ng-file-upload: Invalid file types are correctly not added to the model but turn the form invalid →