How to bind javascript array with @RequestParam using FormData?

Question

The problem is binding javascript arraylist with RequestParam annotation. I have a form data like this works fine if there is no nokDataList. nokInfoDatas is an javascript array that in console it looks:

var requestData = JSON.stringify(nokInfoDatas);
    console.log("nokInfoDatas");
    console.log(nokInfoDatas);
    console.log("requestData");
    console.log(requestData);
var fd = new FormData();
        fd.append('photo', file);
        fd.append('testId', testId);
        fd.append('nokDataList', nokInfoDatas);
var ajaxData = {
            type: "POST",
            data: fd,
            processData : false,
            contentType : false,
            url: sendUrl,
            headers: headersData,
    };

Backend side:

public @ResponseBody String answer(HttpServletRequest request, 
            @RequestParam(value = "photo") MultipartFile photo,
            @RequestParam(value = "testId") String testId,
        @RequestParam(value = "nokDataList") List<NokDataDTO> nokInfoDtos
            )

@harshil it is a basic java class that has : private Long id; private String nokInfo; private String nokData; — Doga Ozdemir
– Doga Ozdemir, Commented Dec 20, 2017 at 8:15

Gurkan Yesilyurt · Accepted Answer · 2017-12-20 09:57:55Z

2

You can try as follows :

Create a Blob with your JSON data (requestData) :

var requestData = JSON.stringify(nokInfoDatas);
var fd = new FormData();
fd.append('photo', file);
fd.append('testId', testId);
fd.append('nokDataList', new Blob([requestData], {
  type: "application/json"
}));

Change @RequestParam to @RequestPart for parsing JSON with multi-part.

public @ResponseBody String answer(HttpServletRequest request, 
       @RequestParam(value = "photo") MultipartFile photo,
       @RequestParam(value = "testId") String testId,
       @RequestPart(value = "nokDataList") List<NokDataDTO> nokInfoDtos
      )

answered Dec 20, 2017 at 9:57

Gurkan Yesilyurt

2,6752 gold badges24 silver badges23 bronze badges

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

5 Comments

Doga Ozdemir Over a year ago

Did not work for me, same problem about binding. By the way I did not use any kind of type like json because when I use to pass file,it blows.Maybe that is why your way didnt work?

Gurkan Yesilyurt Over a year ago

@DogaOzdemir I tried the code and work properly. Maybe you need also Spring multi-part configuration. You can check my configuration here. I'm using Spring 4.3.3.RELEASE.

Doga Ozdemir Over a year ago

after deleting file append,binding worked fine! But there is a weird thing that List<NokDataDTO> nokInfoDtos inside LinkedHashMap values

Gurkan Yesilyurt Over a year ago

@DogaOzdemir try removing headers:headersData your ajax method. I tried without it.

Doga Ozdemir Over a year ago

Solved whit this : List<NokDataDTO> nList= mapper.convertValue(nokInfoDtos, new TypeReference<List<NokDataDTO>>() { }); thanks for help anyway!

Collectives™ on Stack Overflow

How to bind javascript array with @RequestParam using FormData?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related