How to use File Plugin for save Image base64 from Camera Plugin


I’m a newbie in Ionic and I’m trying to build my first app. I’m going to build a Scanner app that can take picture and convert it into a PDF file.

At the moment I could take pictures with format base64 and display it in template. But when I reload my app the pictures disappear.

After searching I realize that I have to use File plugin to save base64 string into a file but after read the docs of File Plugin I still don’t know how to work with it, can somebody explain for me the way to save base64 string in to a file and how to get it to display in template.

Thank you so much.

This is my .ts file:

ngOnInit() { = [];

	deletePhoto(index) {
		let confirm = this.alertCtrl.create({
			title: 'Sure you want to delete this photo? There is NO undo!',
			message: '',
			buttons: [
				text: 'No',
				handler: () => {
					console.log('Disagree clicked');
			}, {
				text: 'Yes',
				handler: () => {
					console.log('Agree clicked');, 1);

	takePhoto() {
		const options : CameraOptions = {
			quality: 100,
			allowEdit: true,
			correctOrientation: true,
			saveToPhotoAlbum: true
		} .then((imageData) => {
			this.base64Image = "data:image/jpeg;base64," + imageData;;;
		}, (err) => {

And this is the codes display pictures in .html file:

      <ion-col col-6 *ngFor="let photo of photos; let id = index">
        <ion-card class="block">
          <ion-icon name="trash" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
          <img [src]="photo" *ngIf="photo" />


Hi @robinyo

Thanks for replying me, I checked your link but seem like it doesn’t help me to solve my problem.

Anyway, thank you so much.