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.

Rossi, I only see a 400 error message in my browser console. Nothing in my eclipse console. — Kurt, Dec 16 '15 at 20:21

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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" />

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 16 '15 at 20:07

Rana_S

1,520
2
23
39

1

Thanks for advice, but it didn't work. I was able to hit my spring controller, but request comes empty and while loop doesn't execute because there is nothing in iterator. – Kurt Dec 16 '15 at 20:28
Is there any file in your files array? You can use browser debugger (F12) and verify. – Rana_S Dec 16 '15 at 20:32
Yes, I see my file in the files array before I send the request to back end. – Kurt Dec 16 '15 at 20:37
Try uploading with different files. – Rana_S Dec 16 '15 at 20:43
I've added 3 more inputs on html, 3 respective js functions and 3 more appends to my FormData object. I uploaded one pdf, one zip and one txt files, but in spring controller the request stayed empty as it was. I checked the files in debugger before calling back end and files were there. – Kurt Dec 16 '15 at 20:57
To verify the js function and spring controller method are working, do this: formData.append("test", "test"); In spring controller method: String value = request.getParameter("test"); system.out.println("value recieved :" + value); – Rana_S Dec 16 '15 at 21:04
Do you have the commons-fileupload dependency in your pom also CommonsMultipartResolver bean in your servlet-config.xml? – Rana_S Dec 16 '15 at 21:09
Yes, I do have both dependency and bean added. The String value = request.getParameter("test") comes as null. – Kurt Dec 16 '15 at 21:19

Spring AngularJS upload file functionality - 400 error Bad request

1 Answers1