Uploading file with other form fields in Angular 2 and Spring MVC

Question

I am trying to upload file and other form field contents from my Angular 2 front end to Spring back end. But somehow I am not able to do it. Here is my code

Answer 1

You need to use @RequestPart instead of @RequestParam and set consumes attribute:

@RequestMapping(value = "/file",method = RequestMethod.POST, consumes = "multipart/form-data")
@ResponseBody
public ResponseEntity<String> addUser(@RequestPart("uploadFile") MultipartFile file, @RequestPart("info") ExampleModel model){}

You also need to adjust your FormData object:

formData.append('uploadFile', file, file.name);
formData.append('info', new Blob([JSON.stringify(this.model)],
        {
            type: "application/json"
        }));

Answer 2

Here is my solution :

It is very important to leave the Content-Type empty. If you set the 'Content-Type' to 'multipart/form-data' the upload will not work !

upload.component.html

<input type="file" (change)="fileChange($event)" name="file" />

upload.component.ts

  fileChange(event): void {
        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
            const file = fileList[0];

            const formData = new FormData();
            formData.append('file', file, file.name);

            const headers = new Headers();
            // It is very important to leave the Content-Type empty
            // do not use headers.append('Content-Type', 'multipart/form-data');
            headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
            const options = new RequestOptions({headers: headers});

            this.http.post('https://api.mysite.com/uploadfile', formData, options)
                 .map(res => res.json())
                 .catch(error => Observable.throw(error))
                 .subscribe(
                     data => console.log('success'),
                     error => console.log(error)
                 );
        }
    }

Answer 3

i'm tryning to use formData to send both myobject and a file form angular 2 to spring mvc deploed on websphere:

ao.component.ts is:

let input=new FormData();
    input.append('appelOffre', new Blob([JSON.stringify(appelOffre)],
        {
            type: "application/json"
        }));
    input.append('compteRendu',file);

    this._aoService.uploadAppelOffre(input)
    .subscribe(
      data => console.log('success'),
      error => console.log(error)
  );

service is:

uploadAppelOffre(input : FormData):  Observable<number>{

  const headers = new Headers();
  const cpHeaders = new Headers({ 'Content-Type': 'application/json' });
  const options = new RequestOptions({ headers: cpHeaders });
  return this.http.post(this.uploadUrl, input, options)
  .map(this.extractData)
  .catch(error => Observable.throw(error))

}

ang my spring service is:

@RequestMapping(value="uploadfile", method=RequestMethod.POST, consumes={"multipart/form-data"} )
    @ResponseBody
    public ResponseEntity<Void> addFile(@RequestPart("compteRendu") MultipartFile file, @RequestPart("appelOffre") AppelOffre ao){

        if(!file.isEmpty()){
            System.out.println("accepted: "+file.getOriginalFilename());
            File convFile = new File( file.getOriginalFilename());
            try {
                file.transferTo(convFile);
                ao.setLien_alfresco_cr(convFile.getAbsolutePath());
               // service.addAppelOffre(ao);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return new ResponseEntity<Void>(HttpStatus.CREATED);

    }

Now using tomcat and mysql it works fine , but once deploed on web sphere i get the problem: [03/01/18 10:21:50:148 GMT] 0000008c srt W com.ibm.ws.webcontainer.srt.SRTServletResponse setHeader SRVE8094W: AVERTISSEMENT : Impossible de définir l'en-tête. La réponse a déjà été validée.

and in console: POST http://localhost:4200/gtaows/services/uploadfile 415 (Unsupported Media Type)

thx,