How to send file to server use AngularJS and Spring

Question

As per subject line I wish to upload/send a file to server using AngularJS and Spring. When i submit file from client it contains $scope.file = "fileURL.jpg", but at the server receives file = null, and the console returns: data = {"description":"Test","status":"REJECTED"}. Below is my code:

I have view:

<label class="control-label col-sm-4 col-xs-12" for="file">Please upload the file : <span class="required">*</span> </label>
<div class="col-xs-4 input-max controls ">
    <input class="inline-block" type="file" name="file" ng-model="file" data-rule-required="true" id="file" accept=".jpg, .jpeg">
</div>

and AngularJs controller:

var test = {
        description:"Test",
        status: "REJECTED"
    };

var fd = new FormData();
fd.append('data', angular.toJson(test));
fd.append("file", $scope.file);
$http({
    method: 'POST',
    url: 'EmployeeService/employee/data/fileupload',
    headers: {'Content-Type': undefined},
    data: fd,
    transformRequest: angular.identity
})
.success(function(data, status) {
                alert("success");
});

Spring controller:

@ResponseBody
@RequestMapping(value = "/data/fileupload", method = RequestMethod.POST)
public String postFile(@RequestParam(value="file", required=false) MultipartFile file,
                       @RequestParam(value="data") Object data) throws Exception {
    System.out.println("data = " + data);
    return "OK!";
}

Answer 1

At HTML:

<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">

At JavaScript:

$scope.onFileSelect = function($files) {
    for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
    var test = {
        description:"Test",
        status: "REJECTED"
        };
    var fd = new FormData();
    fd.append('data', angular.toJson(test));
    fd.append("file", file);
    $http({
        method: 'POST',
        url: 'EmployeeService/employee/data/fileupload',
        headers: {'Content-Type': undefined},
        data: fd,
        transformRequest: angular.identity
        })
       .success(function(data, status) {
             alert("success");
        });
    }
}

At server:

@ResponseBody
@RequestMapping(value = "/data/fileupload", method = RequestMethod.POST)
public String postFile(@RequestParam(value="file", required=false) MultipartFile file,
                       @RequestParam(value="data") Object data) throws Exception {
    System.out.println("data = " + data);
    return "OK!";
}