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;
  }

Jozika · Accepted Answer · 2021-01-28 21:17:54Z

0

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;
}

answered Jan 28, 2021 at 21:17

Jozika

11 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Arun M Over a year ago

android or ios it will not work as expected, for me b64toBlob function not returning anything that is causing the issue.

Collectives™ on Stack Overflow

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

In Html File

TS File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

In Html File

TS File

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related