Spring @RequestParam is not working with HTML FormData

Question

I wanna do a file upload using angularjs as the front-end, and Spring Rest as the back-end. Here is my front-end code:

var data = evt.target.result;
        var formData = new FormData();

        formData.set("fileId", 1);
        formData.set("file", data);

        $http({method: "POST", url: "/file", data: formData, headers : {"Content-Type": undefined}, transformRequest: angular.identity}).success(function() {
            console.log("hi");
        }).error(function(reason) {
            console.log(reason);
        });

And here is my back-end code:

@RequestMapping(value = "/file", method = POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<Void> uploadFile(@RequestPart("file") MultipartFile file) {

I think my code should be working, but in fact, I keep getting error 400 saying that "Required request part 'file' is not present".

any ideas? Thanks.

Here is the data from the firebug:

-----------------------------5045635351933894389797998578
Content-Disposition: form-data; name="fileId"

1
-----------------------------5045635351933894389797998578
Content-Disposition: form-data; name="file"

%PDF-1.7
%Ã¤Ã£ÃÃ’
4 0 obj
<</Type/XObject
/Subtype/Form
/FormType 1
/Matrix[1 0 0 1 0 0]
/BBox[0 0 612 792]
/Resources<</ExtGState<</GS0 5 0 R>>/ProcSet[/PDF/ImageC]/Properties<</MC0 6 0 R>>/XObject<</Im0 7 0
 R>>>>/Filter/FlateDecode/Length 343>>
stream
HÂ‰Â”Â“ÃNÃƒ0Â†Ã¯y
Â¿@SÃ‡Â±Â“Ã¸ÃŠÂ†&;Ã°
-----------------------------5045635351933894389797998578--

We can clearly see the param name, one is fileId and the other is file.

This post here multipartformdata-file-upload-with-angularjs presents a slightly different version of the front-end code you should have using angularjs... — Filip
– Filip, Commented Nov 11, 2015 at 19:24
I use formData.append before I try formData.set @RameshKotha — Junbang Huang
– Junbang Huang, Commented Nov 11, 2015 at 19:30
my angularjs front-end is working, the data reach the server successfully, so I dont think something wrong with the front-end code. @Filip — Junbang Huang
– Junbang Huang, Commented Nov 11, 2015 at 19:34

Junbang Huang · Accepted Answer · 2015-11-11 19:51:28Z

3

I sovled it! The error is that I tried to upload a file's data, not the whole file, which include data, file name and other useful attributes. The previous code is like the following:

var data = evt.target.result;
        var formData = new FormData();

        formData.append("fileId", 1);
        formData.append("file", data);

I change it into the following:

var formData = new FormData();

        formData.append("fileId", 1);
        formData.append("file", file);

file variable reference to the HTML5 file object, while the previous one reference to the file's binary data.

answered Nov 11, 2015 at 19:51

Junbang Huang

1,97719 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Spring @RequestParam is not working with HTML FormData

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