Fix: Submitting post via mobile app (#829)

* Gives each date|time widget a unique id so they can be dealt with separately. (#792)

* fix(USH-1128): rewrite mobile image uploader component

---------

Co-authored-by: ushahidlee <[email protected]>

Author: webong

apps/mobile-mzima-client/android/app/src/main/AndroidManifest.xml

@@ -38,7 +38,6 @@
     </application>
 
     <!-- Permissions -->
-
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
 

apps/mobile-mzima-client/src/app/post/components/image-uploader/image-uploader.component.ts

@@ -44,6 +44,7 @@ export class ImageUploaderComponent implements ControlValueAccessor {
 
   writeValue(obj: any): void {
     if (obj) {
+      console.log('writeValue > obj', obj);
       this.upload = false;
       this.captionControl.patchValue(obj.caption);
       this.id = obj.id;
@@ -70,55 +71,81 @@ export class ImageUploaderComponent implements ControlValueAccessor {
     try {
       if (Capacitor.getPlatform() != 'web') await Camera.requestPermissions();
       const options = {
-        quality: 90,
+        quality: 100,
         allowEditing: false,
         source: CameraSource.Prompt,
         width: 600,
         resultType: CameraResultType.Uri,
       };
       const image = await Camera.getPhoto(options);
+      // Check if the storage folder exists or can be read
       const folderExist = await this.checkFolder();
       if (folderExist) {
         if (image) await this.saveImage(image);
       }
+      this.transferData({ upload: this.upload });
     } catch (e) {
       console.log('takePicture error: ', e);
     }
   }
 
-  async checkFolder(): Promise<boolean> {
-    const options = {
-      directory: Directory.Data,
-      path: IMAGE_DIR,
-    };
-    try {
-      const result = await Filesystem.readdir(options);
-      return !!result.files;
-    } catch (e) {
-      await Filesystem.mkdir(options);
-      return true;
-    }
-  }
-
   /**
    * Save image to storage
    */
   async saveImage(photo: Photo) {
     const base64Data = await new ConvertImage().readAsBase64(photo);
     this.fileName = new Date().getTime() + '.jpeg';
+    const filePath = `${IMAGE_DIR}/${this.fileName}`;
     try {
-      await Filesystem.writeFile({
+      const savedFile = await Filesystem.writeFile({
         directory: Directory.Data,
-        path: `${IMAGE_DIR}/${this.fileName}`,
+        path: filePath,
         data: base64Data,
       });
-      this.loadFiles();
+      // const file = await this.loadFile();
+
+      if (Capacitor.getPlatform() === 'hybrid') {
+        // Display the new image by rewriting the 'file://' path to HTTP
+        // Details: https://ionicframework.com/docs/building/webview#file-protocol
+        this.photo = {
+          name: this.fileName,
+          path: savedFile.uri,
+          data: Capacitor.convertFileSrc(savedFile.uri),
+        };
+      } else {
+        // Use webPath to display the new image instead of base64 since it's
+        // already loaded into memory
+        this.photo = {
+          name: this.fileName,
+          path: filePath,
+          data: photo.webPath!,
+          // data: `data:image/jpeg;base64,${file.data}`,
+        };
+      }
+
+      this.upload = true;
+      this.preview = null;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  async deleteSelectedImage() {
+    try {
+      await Filesystem.deleteFile({
+        directory: Directory.Data,
+        path: this.photo!.path,
+      });
+      this.photo = null;
+      this.upload = false;
+      this.preview = null;
+      this.transferData({ delete: true });
     } catch (e) {
       console.log(e);
     }
   }
 
-  async loadFiles() {
+  async loadFile() {
     const options = {
       directory: Directory.Data,
       path: IMAGE_DIR,
@@ -127,60 +154,43 @@ export class ImageUploaderComponent implements ControlValueAccessor {
     try {
       if (Capacitor.getPlatform() != 'web') await Filesystem.requestPermissions();
       const result = await Filesystem.readdir(options);
-      this.loadFileData(result.files);
+      return await this.loadFileData(result.files);
     } catch (e) {
       console.log('readdir', e);
       await Filesystem.mkdir(options);
+      return false;
     }
   }
 
   async loadFileData(files: FileInfo[]) {
     const file = files.find((el) => el.name === this.fileName)!;
     const filePath = `${IMAGE_DIR}/${file.name}`;
-    const readFile = await Filesystem.readFile({
+    const result = await Filesystem.readFile({
       directory: Directory.Data,
       path: filePath,
     });
 
-    this.upload = true;
-    this.preview = null;
-    this.photo = {
-      name: file.name,
-      path: filePath,
-      data: `data:image/jpeg;base64,${readFile.data}`,
-    };
-
-    console.log('loadFileData', this.photo);
-
-    this.transferData({ upload: this.upload });
+    return result;
   }
 
-  async deleteSelectedImage() {
-    try {
-      await this.deleteImage();
-      this.loadFiles();
-      this.transferData({ delete: true });
-    } catch (e) {
-      console.log(e);
-    }
+  captionChanged() {
+    this.transferData({ upload: this.upload });
   }
 
-  async deleteImage() {
+  private async checkFolder(): Promise<boolean> {
+    const options = {
+      directory: Directory.Data,
+      path: IMAGE_DIR,
+    };
     try {
-      await Filesystem.deleteFile({
-        directory: Directory.Data,
-        path: this.photo!.path,
-      });
-      this.photo = null;
+      const result = await Filesystem.readdir(options);
+      return !!result.files;
     } catch (e) {
-      console.log(e);
+      await Filesystem.mkdir(options);
+      return true;
     }
   }
 
-  captionChanged() {
-    this.transferData({ upload: this.upload });
-  }
-
   private transferData(action: any) {
     let params = {
       caption: this.captionControl.value,

apps/mobile-mzima-client/src/app/post/helpers/convert-image.ts

@@ -5,12 +5,14 @@ import { Filesystem } from '@capacitor/filesystem';
 export class ConvertImage {
   async readAsBase64(photo: Photo) {
     if (Capacitor.getPlatform() === 'hybrid') {
+      console.log('Reading in Hybrid mode');
       const file = await Filesystem.readFile({
         path: photo.path!,
       });
 
       return file.data;
     } else {
+      console.log('Reading in Web mode');
       const response = await fetch(photo.webPath!);
       const blob = await response.blob();
 

apps/mobile-mzima-client/src/app/post/helpers/upload-file.ts

@@ -6,13 +6,16 @@ export class UploadFileHelper {
   constructor(private mediaService: MediaService) {}
 
   async uploadFile(postData: any, { data, name, caption, path }: any) {
+    console.log('uploadFile > photo', data, name, caption, path);
     const fetchPhoto = await fetch(data);
     const blob = await fetchPhoto.blob();
+    console.log('uploadFile > blob', blob);
     const file = new File([blob], name);
+    console.log('uploadFile > file ', file);
     try {
       const uploadObservable = this.mediaService.uploadFile(file, caption);
       const response: any = await lastValueFrom(uploadObservable);
-
+      console.log(response);
       for (const content of postData.post_content) {
         for (const field of content.fields) {
           if (field.input === 'upload') {

apps/mobile-mzima-client/src/app/post/post-edit/post-edit.page.ts

@@ -518,7 +518,6 @@ export class PostEditPage {
    */
   public async submitPost(): Promise<void> {
     if (this.form.disabled) return;
-    // this.form.disable();
 
     try {
       await this.preparationData();
@@ -554,9 +553,6 @@ export class PostEditPage {
 
     await this.offlineStore(postData);
 
-    // TODO: Remove after testing
-    console.log('postData', postData);
-
     if (this.isConnection) {
       await this.uploadPost();
     } else {
@@ -582,6 +578,7 @@ export class PostEditPage {
    */
   async uploadPost() {
     const pendingPosts: any[] = await this.dataBaseService.get(STORAGE_KEYS.PENDING_POST_KEY);
+    console.log('uploadPosts > pendingPosts', pendingPosts);
     for (let postData of pendingPosts) {
       if (postData?.file?.upload) {
         postData = await new UploadFileHelper(this.mediaService).uploadFile(