Unable to POST image alongside text data using FileReader

Hi !
I’ve been struggling to upload picture with text data using an API with POST Method.
For the form I’m using Angular’s FormBuilder.
For the image selection I’m using Ionic’s Camera Plugin

openGallery() {
    this.cam.getPicture(this.camOptions).then((imgData: any) => {
      console.log('img data', imgData);
      this.file.resolveLocalFilesystemUrl(imgData).then((entry: FileEntry) => {
        entry.file(file => {
          console.log('file: ', file);
          this.readFile(file);
        });
      });
    }, (err) => {
      console.log('error: ', err);
    });
  }

And to send all the data to the server I’m using the method readFile() that I found many times on forums

readFile(file: any) {
    const reader = new FileReader();
    const formData = new FormData();
    reader.onloadend = () => {
      console.log('titi?');
      const imgBlob = new Blob([reader.result], {
        type: file.type
      });
      formData.append('name', this.newPrestaForm.value.name);
      formData.append('category_id', this.newPrestaForm.value.category_id);
      formData.append('duration', this.newPrestaForm.value.duration);
      formData.append('price', this.newPrestaForm.value.price);
      formData.append('is_active', this.newPrestaForm.value.is_active);
      formData.append('can_visio', this.newPrestaForm.value.can_visio);
      formData.append('pre_paiement', this.newPrestaForm.value.pre_paiement);
      formData.append('img_url', imgBlob, file.name);
      this.prestaSvc.testImg(formData).subscribe((dataRes) => {
        console.log('dataRes: ', dataRes);
      });
    }
    reader.readAsArrayBuffer(file);
}

The problem is that it seems like reader.onloadend is never called…
I did some research and all I found was to put cordova.js after polyfills.js in index.html, but I don’t have a cordova.js file, probably because I’m working on a Ionic 5 + Capacitor project ?

Hope someone can help me with this ^^

Thanks !

1 post - 1 participant

Read full topic