POST json with some object and File from ReactJS to REST Spring server

Question

I am sending post from my ReactJS application witch contains some json object Map and file uploaded by user.

axios.post(`http://localhost:8080/api/maps`, this.state)

where

this.state = {map: {title: "Title", layers: [...] etc.}, files: [file1]}

I'm getting file1 from FileReaderInput but it is exactly the same as file from html's input type file. This file have field lastModified, lastModifiedDate, name, size, type, webkitRelativePath, __proto_.

And on my REST Server I have this:

@RequestMapping(value = "/maps", method = RequestMethod.POST)
public @ResponseBody
HttpStatus add(@RequestBody CreateMapWrapper wrapper) throws IOException, InterruptedException {
    System.out.println(wrapper.getMap());
    System.out.println(wrapper.getFiles());
    return HttpStatus.OK;
}

where

public class CreateMapWrapper {
    private com.gismaps.pojos.Map map;
    private Set<MultipartFile> files;

    public Map getMap() {
        return map;
    }

    public void setMap(Map map) {
        this.map = map;
    }

    public Set<MultipartFile> getFiles() {
        return files;
    }

    public void setFiles(Set<MultipartFile> files) {
        this.files = files;
    }
}

When I'm sending my Map object and array of null files everything works fine. Request is mapped to CreateMapWrapper and prints Map and array of nulls.

But when I'm placing file to array I get exception:

WARN 4348 --- [nio-8080-exec-6] .w.s.m.s.DefaultHandlerExceptionResolver : Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Could not read JSON document: Can not construct instance of org.springframework.web.multipart.MultipartFile: abstract types either need to be mapped to concrete types, have custom deserializer, or contain additional type information
 at [Source: java.io.PushbackInputStream@79e43652; line: 1, column: 577] (through reference chain: com.gismaps.CreateMapWrapper["files"]->java.util.HashSet[1]); nested exception is com.fasterxml.jackson.databind.JsonMappingException: Can not construct instance of org.springframework.web.multipart.MultipartFile: abstract types either need to be mapped to concrete types, have custom deserializer, or contain additional type information
 at [Source: java.io.PushbackInputStream@79e43652; line: 1, column: 577] (through reference chain: com.gismaps.CreateMapWrapper["files"]->java.util.HashSet[1])

What is wrong? It is something with mapping in REST or I am sending file form React in wrong way? Can I even post something like this?

I'm probably doing something stupid but I was never working with uploading files to Spring REST.

Answer 1

Doesn't look like a react specific issue. Looks like you are not setting up your REST endpoint to handle multipart. You may want to look at this tutorial for spring to see how you can handle file uploads on the server side: https://spring.io/guides/gs/uploading-files/

Answer 2

Simple of getting the form-data in Spring Rest Controller is as following:

RequestMapping(value = "/maps", method = RequestMethod.POST)
public @ResponseBody Object uploadFiles(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
    //get form data fields
    final String field= request.getParameter('fieldName');
    //and so on......

    //Now get the files.
    Iterator<String> iterator = request.getFileNames();
    MultipartFile multipartFile = null;
    while (iterator.hasNext()) {
        multipartFile = request.getFile(iterator.next());
    }
}