Need to catch clicked image as base64 in Ionic 4 - ionic-framework

Question

Trying on a web page. I am using PWA, Ionic 4 and Android.
In my home.html I have added a button
<!-- Trigger the file input -->
<ion-button expand="full" (click)="captureImage()">
<ion-icon slot="start" name="camera"></ion-icon>
Capture Image
</ion-button>
on my home.ts I have this code below:
captureImage() {
this.fileinput.nativeElement.click();
}
On clicking the button, it open the option to select camera app, now when I select the camera app, it allows me to click image. After clicking it takes me back to screen. Here I want to fetch the image as base64.
How do I do that?

Answer 1

You can get the files from :
this.fileinput.nativeElement.files;
For converting the files after selection, use FileReader.readAsDataUrl().
You can find the full code for the same here:
https://forum.ionicframework.com/t/ionic-4-pwa-camera/151148/12
To store file:
Call this before uploading:
upload()
{
const fileList: FileList = this. fileinput.nativeElement.files;
if (fileList && fileList.length > 0)
{
this.firstFileToBase64(fileList[0]).then((result: string) =>
{
this.base64File = result;
}, (err: any) => {
// Ignore error, do nothing
this.base64File = null;
});
}
}
private firstFileToBase64(fileImage: File): Promise<{}> {
return new Promise((resolve, reject) => {
let fileReader: FileReader = new FileReader();
if (fileReader && fileImage != null) {
fileReader.readAsDataURL(fileImage);
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = (error) => {
reject(error);
};
} else {
reject(new Error('No file found'));
}
});
}