Adding files to $scope in AngularJS controller

Question

I have the following input element:

 <div class="form-group">
        <label>Attach BOL Document</label>
           <input name="file" type="file" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />
     </div>

In my controller (outside of any function) I set a variable like this:

 $scope.fd = new FormData();

and I have the following function defined that fires onchange of the input element as seen above:

 $scope.uploadFile = function (files) {
    console.log(files[0]);
    $scope.fd.append("file", files[0]);
    console.log($scope.fd);

};

The first console.log outputs the File object as I expect so I know that is being passed into my $scope. The problem is the second console.log outputs an empty FormData object. The File object is not getting appended??

I thought maybe this was something to do with the fact that I am declaring $scope.fd outside of the UploadFIle function, but even declaring it inside the function does not work...

Why???

Is it not getting appended or not reflected in the view? because you are not doing `$scope.$apply()` — PSL, Jun 09 '15 at 21:06
what's with the funky reference in `onchange`? there isn't any reason to use `angular.element` in this example, that I'm aware of? — Claies, Jun 09 '15 at 21:29
I think its not getting appended as I see the empty FormData object in the console.log statement showing in the JavaScript console. I am not trying to update the view with this value, it will be submitted to the server via $http. The "funky" reference with onchange is due to the fact that ng-model is not supported oin input type "file". See this post for reference: — Tommy Alexander, Jun 09 '15 at 22:18
http://stackoverflow.com/questions/13963022/angularjs-how-to-implement-a-simple-file-upload-with-multipart-form — Tommy Alexander, Jun 09 '15 at 22:18

score 0 · Accepted Answer · edited May 23 '17 at 12:32

Well I figured out whats going on here. Its got nothing to do with AngularJs. You cannot inspect the keys added to a FormData object. See this question for a reference

How to inspect FormData?

This really stinks... So until I get the server side code ready and I actually POST the data I cant tell if the file is actually getting appended. I feel certain it is however I cant validate this.

Adding files to $scope in AngularJS controller

1 Answers1