Spring AngularJS upload file functionality - 400 error Bad request

Question

I'm trying to upload the file using Spring and AngularJS, but I'm getting a 400 Bad request error:

> error: "Bad Request" > exception: "org.springframework.web.multipart.support.MissingServletRequestPartException" > message: "Required request part 'file' is not present." > path:"/project/ffl/newDocument 

I went through different example of how to implement the functionality (#1, #2, #3, #4, #5 and few more) and followed all of them. Although, I'm still getting the 400 error.

My request:

Request URL:https://localhost:8443/project/ffl/newDocument Request Method:POST Status Code:400 Bad Request Remote Address:[::1]:8443 Response Headers view source Cache-Control:no-cache, no-store, max-age=0, must-revalidate Connection:close Content-Type:application/json;charset=UTF-8 Date:Wed, 16 Dec 2015 18:24:08 GMT Expires:0 Pragma:no-cache Server:Apache-Coyote/1.1 Strict-Transport-Security:max-age=31536000 ; includeSubDomains Transfer-Encoding:chunked X-Content-Type-Options:nosniff X-Frame-Options:DENY X-XSS-Protection:1; mode=block Request Headers view source Accept:application/json, text/plain, */* Accept-Encoding:gzip, deflate Accept-Language:en-US,en;q=0.8,uk;q=0.6,ru;q=0.4 Connection:keep-alive Content-Length:75515 Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylcovac73AQDt1CNW Host:localhost:8443 Origin:https://localhost:8443 Referer:https://localhost:8443/project/ User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 X-Requested-With:XMLHttpRequest Request Payload ------WebKitFormBoundarylcovac73AQDt1CNW Content-Disposition: form-data; name="file"; filename="test.pdf" Content-Type: application/pdf ------WebKitFormBoundarylcovac73AQDt1CNW-- 

HTML:

<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data"> <input type="file" name="file" id="file" ng-model="document.fileInput" onchange="angular.element(this).scope().upload(this)" > <button class="btn btn-primary" type="submit">Submit</button> </form> 

JS:

 $scope.document = {}; var file = {}; $scope.upload = function(fileInput) { file = fileInput; }; $scope.uploadFile = function(){ var formData = new FormData(); formData.append("file", file.files[0]); $http.post('ffl/newDocument', formData, { headers: {'Content-Type': undefined }, transformRequest: angular.identity }).then(function (response) { }, function (error) { console.error('Error: ', error.status, error.data); }); }; 

Java:

@RestController @RequestMapping("/ffl") @RequestMapping(value="/newDocument", method = RequestMethod.POST, consumes = {"multipart/form-data"}) public @ResponseBody void uploadFile(@RequestPart("file") MultipartFile file) throws IOException { 

Any help will be appreciated.

Answer 1

1. List item Change the method on the Spring Controller to use this:

 RequestMapping(value = "/newDocument", method = RequestMethod.POST) public @ResponseBody Object uploadFiles(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException { Iterator<String> iterator = request.getFileNames(); MultipartFile multipartFile = null; while (iterator.hasNext()) { multipartFile = request.getFile(iterator.next()); //do something with the file..... } } 

2. And your Angular controller:

 console.log(files[0]); $http.post( '/myEndpoint', formData, { headers: { 'Content-Type': undefined }, transformRequest: angular.identity }).success(function (result) { console.log('Success'); }).error(function () { console.log('Failure'); }); 

3. You should have following Dependency:

commons-fileupload

4. Add this bean in your servlet-configuration.xml

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