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

on your @RequestMapping(method = RequestMethod.POST) annotataion add this @RequestMapping(method = RequestMethod.POST,consumes = {"multipart/form-data"}) — Asanka, Nov 03 '18 at 16:31
https://stackoverflow.com/questions/21329426/spring-mvc-multipart-request-with-json, can you check this answer. — Asanka, Nov 03 '18 at 16:37

score 0 · Answer 1 · answered Nov 03 '18 at 16:33

0

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..?

answered Nov 03 '18 at 16:33

Peter van der Wal

61
5

I got error [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'fabricDTO' is not present]. I saw the thread but not sure about how data are sent, with a formData or else... – Lempkin Nov 03 '18 at 16:38
check using @RequestParam(" fabricDTO") FabricDTO fabricDTO instead of @RequestBody FabricDTO fabricDTO – Asanka Nov 03 '18 at 17:11

score 0 · Answer 2 · answered Nov 03 '18 at 17:43

0

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

answered Nov 03 '18 at 17:43

Asanka

1,628
1
10
20

Still not : Field error in object 'formWrapper' on field 'fabricDTO': rejected value [{"length":"4","comment":"hfgh"}]; codes [typeMismatch.formWrapper.fabricDTO,typeMismatch.fabricDTO,typeMismatch.com.myApp.service.dto.FabricDTO,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [formWrapper.fabricDTO,fabricDTO]; arguments []; default message [fabricDTO]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'com.myApp.service.dto.FabricDTO' for property 'fabricDTO'; nested exception is j... – Lempkin Nov 03 '18 at 18:13
Seems that it doesn't expect some Json, in the answer that you pointed, form is submited directly, that may be why I got different result :/ – Lempkin Nov 03 '18 at 18:14
It is about object mapping problem. It can't parse object correctly.try to use consume word. you have to try different ways. – Asanka Nov 03 '18 at 18:22
Yep that's what I did, I tried all those solutions and then I got no more idea that's why I ask :) (same error with consume btw) – Lempkin Nov 03 '18 at 18:26
your fabric DTO properties should be match same as frond end object (name and types) – Asanka Nov 03 '18 at 18:32

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

2 Answers2