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

Hi,

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() {
		this.photos = [];
	}

	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');
					this.photos.splice(index, 1);
				}
			}
			]
		});
		confirm.present();
	}

	takePhoto() {
		const options : CameraOptions = {
			quality: 100,
			destinationType: this.camera.DestinationType.FILE_URI,
			encodingType: this.camera.EncodingType.JPEG,
			mediaType: this.camera.MediaType.PICTURE,
			allowEdit: true,
			correctOrientation: true,
			saveToPhotoAlbum: true
		}
		this.camera.getPicture(options) .then((imageData) => {
			this.base64Image = "data:image/jpeg;base64," + imageData;
			this.photos.push(this.base64Image);
			this.photos.reverse();
		}, (err) => {
			console.log(err);
		});
	}

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

  <ion-grid>
    <ion-row>
      <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" />
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

See: https://github.com/doo/scanbot-sdk-example-ionic2

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.