IONIC HTTP post multipart/ form-data - Image Upload along with JSON

Question

I am trying to upload an image along with the form data through HTTP Post in multipart. When I try with postman I am able to upload but with frontend when I try to upload the file along with the form data as a multipart request, I get bad request error. I really appreciate your inputs. Have been working on this for 2 days now.

My Backend is Spring: Backend code:

  @RequestMapping(value = "/lender/signup", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE, produces =MediaType.APPLICATION_JSON_VALUE)

   @ResponseStatus(HttpStatus.CREATED)

    Object signUpLender(@RequestPart("file") MultipartFile file, 

    @RequestPart("lender") LenderInfo lenderRequest) throws Exception {

    log.info("SignUp Received, preparing to process lender")
    lenderRequest.base64Logo = mediaService.getBase64Media(file)
    Optional<Object> lenderInfo = Service.signUpLender(lenderRequest)
    log.info("Fetched LenderInfo: ${lenderInfo.get()}")
    lenderInfo.get()
}

Frontend::Ionic:

 uploadImage() {
    // Destination URL
    var url = LENDER_URL;

    // File for Upload
    var targetPath = this.pathForImage(this.correctPath);

    // File name only
    var filename = this.correctPath;
      //const filetransfer: TransferObject = this.transfer.create();
    var options = {
        fileKey: "file",
        fileName: this.currentName,
        chunkedMode: false,
        mimeType: "multipart/form-data",
        params: {'lender':this.userData,
            'file':this.currentName},
        httpMethod:'POST'
    };
      let headers = new HttpHeaders();
      headers.append('Content-Type', undefined);
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS,PUT');
        this.formData.then((_)=>{
            this.loading = this.loadingCtrl.create({
                content: 'Uploading...',
            });
            this.loading.present();
            this.network.postService(url,options,headers).then(()=>{
                this.loading.dismissAll();
                this.presentToast('Image succesful uploaded.');
            }, err => {
                this.loading.dismissAll();
                console.log(JSON.stringify(err));
                this.presentToast('Error while uploading file.');
            });
        },err=>{JSON.stringify(err)});

In Postman when I try to hit the endpoint I am able to post the values as I choose my image(file) and JSON as a file. Please let me know your inputs.

Thanks

John Sparrow John Sparrow · Accepted Answer · 2018-07-16T19:50:46

I've already gone through this, one way to solve it is to specify the type @RequestPart (value = "nameOfResource" and consumes = {"multipart/form-data"}

Do not forget to specify the name of Content in Ionic. I hope it helps.

Here is an Java example below:

RequestMapping(value = "/add", method = RequestMethod.POST, consumes = {"multipart/form-data"}, produces = "application/json")
        public ResponseEntity<?> add(@RequestPart(value = "image", required = true) MultipartFile image, 
                                     @RequestPart(value = "team", required = true) @Valid Team team, BindingResult bResult) {

}

IONIC HTTP post multipart/ form-data - Image Upload along with JSON

1 Answers