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???

Answer 1

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.