Tomasz Cy-man Tomasz Cy-man - 7 months ago 350
Java Question

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

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?

Answer

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

Comments