Angular JS "form Multi-part" file upload sending Undefined value to server. Cannot upload file to Java Server

Question

I have the following HTML.

    <form >
        <input type="file" file-model="myFile"/>
       <button ng-click="uploadFile()">upload me</button>
   </form>

And inside controller I have following function

$scope.uploadFile = function() {
        var file = $scope.myFile; //when I try console.log(file...it says undefined)
       var fd = new FormData();
        fd.append('file', file);
        $http.post("url", fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined},
                transformResponse: [function (data) {
                    return data;
                }]
            }).then(function (result) {
            console.log(result.data);
        })
    }

the Directives I have is

 .directive('fileModel', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function(){
                    scope.$apply(function(){
                        modelSetter(scope, element[0].files[0]);
                    });
                });
            }
        };
    }]);

For some reason, I am not getting the file value. On console.log() I am receiving undefined. FYI, I am just trying to grab a file. Is there something wrong in my code?

I came to that conclusion because it seems to have passing undefined to server from browser's developer tool. The screen-grab is as follows.

Answer 1

The problem was non binding issue with files. Angular has no support for that yet. It was solved with the solution provided here. AngularJs: How to check for changes in file input fields?

Answer 2

This worked for me:

<div>
    <input id="imageList" name="imageList" type="file" file-model="myFile">
</div>

I also had a json object to send with the form:

$scope.saveForm = function () {
      var formData = new FormData();
      var file = $scope.myFile;
      formData.append("file", file);
      var req = {
        url: '/upload',
        method: 'POST',
        headers: {'Content-Type': undefined},
        data: formData,
        transformRequest: function (data, headersGetterFunction) {
          return data;
        }
      };