Upload multiple files with Angular to Spring Controller

Question

I want to upload to server multiple files. Here is my Angular code:

app.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);
                });
            });
        }
    };
}]);

And part of the controller:

var fd = new FormData();
fd.append('files', $scope.file);
fd.append('ticketDto', JSON.stringify(data));
$http({
    method: 'POST',
    url: url,
    headers: {
        'Content-Type': undefined
    },
    data: fd,
    arrayKey: '',
    transformRequest: function (data, headersGetterFunction) {
        return data;
    }
})

The problem is that in controller:

public void createTicket(@RequestParam(value = "files", required = false) List<MultipartFile> files,
                         Authentication authentication,
                         @RequestParam(value = "ticketDto", required = false) String name)

'files' list is always empty (I also tried MultipartFile[] instead of list). It works only if in directive return not all files, but one, for example:

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

instead of

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

Fairy · Accepted Answer · 2017-11-28 19:36:08Z

3

Finally I got it. The solution is to add all files to the FormData apart, not as list or array:

angular.forEach($scope.file, function (value, key) {
            fd.append('files', value);
        })

And then in Spring controller:

public void createTicket(@RequestParam(required = false) MultipartFile[] files)

The array contains all appended files.

answered Nov 28, 2017 at 19:36

Fairy

5312 gold badges9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload multiple files with Angular to Spring Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related