angular2 multipart image upload

Question

I'm developing web application with spring rest and angilar2 . I have such backend api (in pseudocode):

@POST
method create( @Json Data data, @Multipart Image img){
  ...........
}

I need an angular2 example relevant to this particular api. Is it possible to send JSON and Image separately in one request? Maybe I have to send Image within JSON as byte[] ? Either have to send two separate requests with data and image as below?:

@POST
method create(@Json Data data){
   ........ 
   return Id;
}

@POST
method uplodImg(Long id, Image img){
}

Answer 1

You can use FormData to send data as well as image together in one request. For eg:-

let formData = new FormData();
        formData.append("name", value);
        formData.append("file",this.file);

And you can access the file as:

@RequestMapping(value = "/upload", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

public String uploadLayoutFile(@RequestParam("file") MultipartFile multipartFile, @RequestParam("name") string name)
{
.
.

}