Take picture added to new publications

src/app/pages/publications/new-publication/new-publication.page.html

@@ -56,7 +56,7 @@
       </div>
 
       <div class="ion-item-container-no-border">
-        <ion-label (click)="takePicture()">
+        <ion-label (click)="selectImage()">
           <div class="attach-icon">
             <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
             <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController, NavParams } from '@ionic/angular';
+import { ModalController, NavParams, Platform, LoadingController } from '@ionic/angular';
 
 /* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@@ -18,12 +18,22 @@ import { FileToBase64Service } from 'src/app/services/file/file-to-base64.servic
 import { ThemeService } from 'src/app/services/theme.service';
 import { Camera,  CameraResultType, CameraSource, Photo} from '@capacitor/camera';
 
+import { Filesystem, Directory } from '@capacitor/filesystem';
+
+const IMAGE_DIR = 'stored-images';
+
+interface LocalFile {
+  name: string;
+  path: string;
+  data: string;
+}
 @Component({
   selector: 'app-new-publication',
   templateUrl: './new-publication.page.html',
   styleUrls: ['./new-publication.page.scss'],
 })
 export class NewPublicationPage implements OnInit {
+  images: LocalFile[] = [];
 
   // date picker
   public date: any;
@@ -70,7 +80,9 @@ export class NewPublicationPage implements OnInit {
     private toastService: ToastService,
     private fileLoaderService: FileLoaderService,
     private fileToBase64Service: FileToBase64Service,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private platform: Platform,
+    private loadingCtrl: LoadingController,
     ) {
 
       this.publicationType = this.navParams.get('publicationType');
@@ -81,6 +93,11 @@ export class NewPublicationPage implements OnInit {
   ngOnInit() {
     this.setTitle();
     console.log(this.folderId);
+    Filesystem.mkdir({
+      path: IMAGE_DIR,
+      directory: Directory.Data,
+      recursive: true
+    });
 
     // this.takePicture();
   }
@@ -369,4 +386,102 @@ async takePicture() {
     this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
   } */
 
+
+
+ 
+async selectImage() {
+    const image = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: false,
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Camera // Camera, Photos or Prompt!
+    });
+ 
+    if (image) {
+        this.saveImage(image)
+    }
+}
+ 
+// Create a new file from a capture image
+async saveImage(photo: Photo) {
+    const base64Data = await this.readAsBase64(photo);
+ 
+    const fileName = new Date().getTime() + '.jpeg';
+    const savedFile = await Filesystem.writeFile({
+        path: `${IMAGE_DIR}/${fileName}`,
+        data: base64Data,
+        directory: Directory.Data
+    });
+ 
+    this.loadFiles();
+}
+ 
+  private async readAsBase64(photo: Photo) {
+    if (this.platform.is('hybrid')) {
+        const file = await Filesystem.readFile({
+            path: photo.path
+        });
+ 
+        return file.data;
+    }
+    else {
+        // Fetch the photo, read as a blob, then convert to base64 format
+        const response = await fetch(photo.webPath);
+        const blob = await response.blob();
+ 
+        return await this.convertBlobToBase64(blob) as string;
+    }
+}
+
+async loadFiles() {
+  this.images = [];
+
+  const loading = await this.loadingCtrl.create({
+    message: 'Loading data...',
+  });
+  await loading.present();
+
+  Filesystem.readdir({
+    path: IMAGE_DIR,
+    directory: Directory.Data,
+  }).then(result => {
+    console.log('ALL RESULTS', result.files[0])
+    let lastphoto = result.files[result.files.length -1]
+    this.loadFileData(lastphoto);
+  },
+    async (err) => {
+      console.log('ERROR FILE DOSENT EXIST',err)
+      // Folder does not yet exists!
+      await Filesystem.mkdir({
+        path: IMAGE_DIR,
+        directory: Directory.Data,
+        recursive: true
+      });
+    }
+  ).then(_ => {
+    loading.dismiss();
+  });
+}
+
+async loadFileData(fileName: string) {
+  console.log('ALL PHOTOT FILE', fileName)
+ // for (let f of fileNames) {
+    const filePath = `${IMAGE_DIR}/${fileName}`;
+
+    const readFile = await Filesystem.readFile({
+      path: filePath,
+      directory: Directory.Data,
+    });
+
+    this.images.push({
+      name: fileName,
+      path: filePath,
+      data: `data:image/jpeg;base64,${readFile.data}`,
+    });
+
+    console.log('ALL IMAGE',this.images)
+
+    this.capturedImage = this.images[0].data
+  //}
+}
 }