How to use native api to upload images from gallery and camera?

Ionic Framework Ionic Angular
1

hi everyone i want to know how to upload images using native plugin .

2

If you are using capacitor in your project then you can use camera official plugin of capacitor where you can take picture with device camera. Similarly you can pick images multiples and one just you read the documentations in below link

Capacitor Camera

3

i got the solution . also there was one error when we use Filereader onload event was not trigger.
it get fix by following code

import { Camera, CameraOptions } from ‘@awesome-cordova-plugins/camera/ngx’;
import { File } from ‘@awesome-cordova-plugins/file/ngx’;
import { ActionSheetController } from ‘@ionic/angular’;

async selectimageOptions() {
const actionsheet = await this.actionsheet.create({
header: ‘Select image Source’,
buttons: [
{
text: ‘Load from Gallery’,
handler: () => {
this.selectImage();
console.log(‘Image Selected from Gallery’);
},
},
{
text: ‘Select Camera’,
handler: () => {
this.CaptureImage();
console.log(‘Camera Selected’);
},
},
{
text: ‘Cancel’,
role: ‘cancel’,
},
],
});
await actionsheet.present();
}

async selectImage() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
};

this.camera.getPicture(options).then(
  (imageData) => {
    let file = imageData
    console.log(file);
    this.uploadPhoto(file);
  },
  (err) => {
    // Handle error
  }
);

}

async CaptureImage() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA,
};

this.camera.getPicture(options).then(
  (imageData) => {
    // imageData is either a base64 encoded string or a file URI
    // If it's base64 (DATA_URL):
    let file = imageData;

    // let images:any = this.makeFileIntoBlob(file);
    console.log(file);
    this.uploadPhoto(file);
  },
  (err) => {
    // Handle error
  }
);

}

private uploadPhoto(imageFileUri: any): void {
// this.presentLoding();
this.file
.resolveLocalFilesystemUrl(imageFileUri)
.then((entry) => (entry).file((file) => this.readFile(file)))
.catch((err) => console.log(‘error’));
}
private readFile(file: any) {
console.log(file, ‘in read file’);
let reader = getFileReader();

reader.onloadend = () => {
  console.log('filereader');

  const formData = new FormData();
  const imgBlob = new Blob([reader.result], { type: file.type });

  console.log(imgBlob);
  console.log(reader.result);

  formData.append('file', imgBlob, file.name);
  this.postData(formData);
};
reader.readAsArrayBuffer(file);

}

export function getFileReader(): FileReader {
const fileReader = new FileReader();
const zoneOriginalInstance = (fileReader as any)[
‘__zone_symbol__originalInstance’
];
return zoneOriginalInstance || fileReader;
}

4 
import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';

.....
capturePhoto()
  {
     let options:CameraOptions={

        quality:100,
        encodingType:this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        destinationType:this.camera.DestinationType.FILE_URI,
        sourceType:this.camera.PictureSourceType.CAMERA,
        //targetWidth:300
        targetHeight:300,
        saveToPhotoAlbum:true
     }

     this.camera.getPicture(options).then((imageData)=>{ 
            this.path = window.Ionic.WebView.convertFileSrc(imageData);        
     },
     err=>{       
     })
      
  }

}

for more details //ionic 6 Angular : Access Camera & capture photos in Ionic Apps with example - YouTube

5

A question about GalleryImageOptions.limit: "Maximum number of pictures the user will be able to choose. Note: This option is only supported on Android 13+ and iOS. ". But Android 13 was just released in 2022, how did previous systems use limit. Or are there any other community plugins of recommended