Multiple image upload in ionic 5 angular (Capacitor Camera) and nodejs multer

Question

I'm trying to upload multiple images in ionic angular app not able to send the correct payload to the API.sending data from postman working well. Back-end using nodejs multer package for handling the image upload.

How to send correct payload from UI to backend. For web we can use form data for image upload but mobile not able to find the solution

In Html File

<ion-button fill="outline" expand="block" color="secondary" (click)="selectImageSource()">
     <ion-icon slot="start" name="camera"></ion-icon>
      Upload
 </ion-button>

TS File

async selectImageSource() {
    const buttons = [
      {
        text: 'Choose from gallary',
        icon: 'image',
        handler: () => {
          this.addImage(CameraSource.Photos);
        }
      }
    ];

    const actionSheet = await this.actionSheetController.create({
      header: 'Select image source',
      buttons
    });
    await actionSheet.present();
  }

async addImage(source: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Base64,
      source,
      allowEditing: false
    });

    const blobData = this.b64toBlob(image.base64String, `image/${image.format}`);
    const uploadParams = {
      userId: 'Abcd1234',
      uploadType: 'profile-pics'
    };

    this.apiService.uploadPhotos(blobData, uploadParams)
      .subscribe((img: any) => {
        console.log('Image: ', img);
      }, (err) => console.log('Eror: ', err));
  }


    b64toBlob(b64Data, contentType= '', sliceSize= 512) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }

Answer 1

For selecting multiple images you could use <input #file type="file" multiple (change)="onFileSelect()" /> since it works on devices as well.

And your TS file would look like this to get an array of selected files in your case images.

@ViewChild('file', { static: false }) public file: ElementRef;

public onFileSelect(): void {
    const fileArray: Array<File> = this.file.nativeElement.files;
}