0

I'm trying to upload a file with some other form data from AngularJS using $http to Spring MVC controller. I get this error:

HTTP Status 400 - Required request part 'file' is not present
The request sent by the client was syntactically incorrect.

Here is the AngularJS code sending the post request:

service.create = function(id, photo) {
            var formData = new FormData();
            formData.append('name', photo.name);
            formData.append('file', photo.file);
            formData.append('story', photo.story);
            if (!photo.url) {
                photo.url = null;
            }
            formData.append('url', photo.url);
            return $http(
                    {
                        method : 'POST',
                        transformRequest: angular.identity,
                        transformResponse: angular.identity,
                        url : BASE_URL + authService.getToken().id
                                + '/resource/' + id + '/photo/',
                        data : formData,
                        headers : {
                            'Content-Type' : undefined
                        }
                    }).then(function(res) {
                return res;
            });
        };

And here is my Spring MVC controller method receiving the request:

@Override
@RequestMapping(path = "user/{uid}/resource/{lid}/photo", method = RequestMethod.POST)
public Photo create(HttpServletRequest request, HttpServletResponse response, @PathVariable int uid, @PathVariable int lid,
        @RequestParam MultipartFile file, @RequestParam String name, @RequestParam String url, @RequestParam String story) {
    return photoDAO.create(uid, lid, file, name, url, story);
}

I also have the MultipartResolver bean added to my config:

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

    <!-- one of the properties available; the maximum file size in bytes -->
    <property name="maxUploadSize" value="10000000" />
</bean>

What could be causing the controller not to find the file request parameter? How else should I be reading the file to get it as a MultipartFile?

Note: I am aware there are many other questions similar to mine in one way or another. None of the answers there helped me.

the file is being sent as part of the payload. This is a how the payload looks like: 

------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="name" 
n 
------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="file" 
PNG [REMOVED FOR SPACE] % V4¡´ºÝÝ6nI6Ú"èdöîÎÉÎ83»ý¡OEP|1êÄ¿· (õÛ>´/ 
------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="story" 
st 
------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="url" 
null 
------WebKitFormBoundaryK0onA6CrI1KaKcJY--
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Shant Dashjian
  • 888
  • 11
  • 20
  • are you sure photo.file is byte array?? – Alien Jul 09 '18 at 05:17
  • 1
    Show the code for creating `photo.file` or console.log it to verify that it is a file. Use the Developer Console network tab to verify that a file has been sent as part of the payload. – georgeawg Jul 09 '18 at 08:49
  • @georgeawg yes the file is being sent as part of the payload. This is a how the payload looks like: `------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="name" n ------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="file" PNG [REMOVED FOR SPACE] % V4¡´ºÝÝ6nI6Ú"èdöîÎÉÎ83»ý¡OEP|1êÄ¿· (õÛ>´/ ------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="story" st ------WebKitFormBoundaryK0onA6CrI1KaKcJY Content-Disposition: form-data; name="url" null ------WebKitFormBoundaryK0onA6CrI1KaKcJY--` – Shant Dashjian Jul 09 '18 at 10:33
  • That file is not properly encoded in base64 which means `photo.file` is not a [File object](https://developer.mozilla.org/en-US/docs/Web/API/File). – georgeawg Jul 09 '18 at 13:08

0 Answers0