Angular - Spring : how to pass file + json object to WS?

Question

On angular side, I pass my file + json object :

const formData: FormData = new FormData();
formData.append('fabricDTO', JSON.stringify(classToPlain(fabric)));
formData.append('file', picture);
return this.http.Post(this.SAVE_FABRIC_URL, formData)

And on java side I try to get the file and json object. I have a DTO with same structure :

@RestController
@RequestMapping(value = "fabric")
public class FabricController {

    @Autowired
    IFabricService fabricService;


    @PreAuthorize("#oauth2.hasScope('foo') and #oauth2.hasScope('read')")
    @RequestMapping(method = RequestMethod.GET)
    public ResponseEntity<Collection<FabricDTO>> getUserFabrics() {
        ...
    }

    @PreAuthorize("#oauth2.hasScope('foo') and #oauth2.hasScope('read')")
    @RequestMapping(method = RequestMethod.POST)
    public ResponseEntity saveUserFabrics(@RequestBody FabricDTO fabricDTO, 
            @RequestParam("file") MultipartFile file) {
    ...
    }

}

In config I do have multipartResolver

@Bean(name = "multipartResolver")
    public CommonsMultipartResolver multipartResolver() {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        multipartResolver.setMaxUploadSize(1000000);
        return multipartResolver;
    }

This is what I see in chrome console, in Form data :

fabricDTO: {"fabricTypeId":4,"comment":"sdf"}
file: (binary)

FabricDTO is :

private int id;
private float length;
private String comment;
private int fabricTypeId;

But when I send call the WS I got error :

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundarymeuYlXb7Tsiyovtn;charset=UTF-8' not supported]

I believe that I shouldn't use @RequestBody to get the DTO, I tried with @RequestParam but all DTO values are null.

Should I pass my data in a different way?

If I don't add the DTO in formData and I comment the "@RequestBody FabricDTO fabricDTO" in controller, I'm able to get the file.

Thx

Answer 1

Try using @Requestpart

@ResponseBody
public ResponseEntity saveUserFabrics(@RequestPart FabricDTO fabricDTO, 
    @RequestPart MultipartFile file) { //Do your magic here }

as fellow SO-ers did here: Can we use multipart and @RequestBody together in spring..?

Answer 2

Use a class as

public class FormWrapper {
    private MultipartFile file;
    private FabricDTO fabricDTO;
}

and controller as this

@PostMapping()
    public ResponseEntity saveUserFabrics(@ModelAttribute FormWrapper model) {
        try {
           ...
        } catch (IOException e) {
          ...
        }
        return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);
    }

as this answer https://stackoverflow.com/a/49991403/6706381