Upload image ionic via httpClient

Ionic Native
1

My backen looks like this. The backend required a file and 2 string params

@multipart/form-data
file: File,
title: string,
content: string

I used to use <input type=“file”…> to select file then upload it to server via httpClient and formData

  const formData = new FormData();
    formData.append('title', form.value.title);
    formData.append('content', form.value.description);
    formData.append('file', this.img);

this.http.post(this.apiUrl + '/img', formData, settings);

Everything works just fine.

But now I decide that I do not want to use <input type=“file” …/> any more. I decide to use native camera

getPictureFromCamera() {
    return new Promise((resolve, reject) => {
      const options: CameraOptions = {
        quality: 100,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
      }

      this.camera.getPicture(options).then((imageData) => {

        let base64Image = null;

        //get photo from the camera based on platform type
         base64Image = normalizeURL(imageData);
        resolve(base64Image);

      }, (error) => {
        console.debug("Unable to obtain picture: " + error, "app");
        reject(error);
      });
    })

  }

I successfully can take and display the picture. The problem is that my function only return the path of image (not the file). How can I get the actual file so I can use form-data and httpClient to post it to my server.

I want to use my old formdata function so I just need a file. Is there any way I just only get a file from imgPath.

Note: when I log ‘base64Image’ (you can see in the code above)

http://localhost:8080/var/mobile/Containers/Data/Application/85D7DD14-849C-4ADE-9005-D8165CC2A55B/tmp/cdv_photo_001.jpg
2

Why would you think you’d get a bas64Image when you have your destination type ste to file uri? If you want a base64 image you have to use the data url destination type, as very clearly stated in the docs.

Also, why are you wrapping your whole function in a promise? The camera already returns a promise, don’t do that.

EDIT If you want the file from the path, you can also certainly do that using the ionic native file plugin. then you can submit that.