AngularJS + Spring + REST -- sending multiple files and data

Question

i have a little problem... i cant upload multiple files to my server, pls look at my code:

in Spring context:

    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    </bean>

in Spring controller

    @RequestMapping(value = "/address-to-add-object/add", method = RequestMethod.POST)
    public void addObject(@RequestParam(value = "files", required = false) MultipartFile[] files, @RequestParam("formDataJson") String formDataJson) {
        //-- my stuff with formDataObject and uploaded files
    }

in Angular controller

         $scope.sendForm = function(){
            var formData = new FormData();
            formData.append('formDataJson', JSON.stringify($scope.myObject));
            var files = $("#file-0a").prop('files');
            var filesArray = [];
            for (var i = 0 ; i < files.length ; i ++){
                filesArray.push(files[i]);
            }
            formData.append('files', filesArray);
            ObjectService.add(formData).$promise.then(function () {
                Notification.info('success');
            }, function () {
                Notification.error('error');
            });
        };

in ObjectService

objectService.factory('ObjectService', ["$resource", function($resource) {
    var baseUrl = './address-to-add-object';
    return $resource(baseUrl, {},
        {
            add: {
                url: baseUrl + '/add',
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: angular.identity,
                method: 'POST'
            }
        });
}]);

and request content:

------WebKitFormBoundaryNhBUQjEH2kAlVlog
Content-Disposition: form-data; name="formDataJson"

{---json object---}
------WebKitFormBoundaryNhBUQjEH2kAlVlog
Content-Disposition: form-data; name="files"

[object File],[object File],[object File]

------WebKitFormBoundaryNhBUQjEH2kAlVlog--

and error from console

POST http://localhost:8080/project/address-to-add-object/add 500 (Internal Server Error)

and now description of my problem ;)

I can easily send one file and some data, but when i want to send multiple files a have error like above or 'files' variable is empty. I tried with List <>, wrap to bean, and cant intercept fileList object (when send $("#file-0a").prop('files')) from ajax request (or array of files when send filesArray).

Can you help me with that, do you have any ideas what can I do?

Tomasz Cy-man · Accepted Answer · 2016-05-02 19:55:13Z

2

problem was on sendig files - or not sending, because as you can see sended was toString of files

[object File],[object File],[object File]

i had to change appedning of files to my FormData object:

var formData = new FormData();
formData.append('formDataJson', JSON.stringify($scope.touristObject));
var files = $("#file-0a").prop('files');
for (var i = 0 ; i < files.length ; i ++){
   formData.append('files', files[i]);
}

and on Spring Controller side without any changes

answered May 2, 2016 at 19:55

Tomasz Cy-man

2511 gold badge4 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

AngularJS + Spring + REST -- sending multiple files and data

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