Ush 1189 & 1198 - Images in the mobile app (#1085)

Author: ushahidlee

apps/mobile-mzima-client/capacitor.config.ts

@@ -38,7 +38,7 @@ const config: CapacitorConfig = {
       resizeOnFullScreen: true,
     },
     CapacitorHttp: {
-      enabled: true,
+      enabled: false,
     },
     Intercom: {
       iosApiKey: 'ios_sdk-39fba04b7c5ab918fb743cc4a55ea9380221eb3c',

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

@@ -1,10 +1,7 @@
 <div class="image-loader">
   <div class="image-loader__wrap">
     <div class="post-images" *ngIf="photo?.data">
-      <img class="post-image" [src]="photo?.data" />
-    </div>
-    <div class="post-images" *ngIf="preview && isConnection">
-      <img class="post-image" [src]="preview" />
+      <img class="post-image" [src]="this.domSanitizer.bypassSecurityTrustUrl(photo!.data)" />
     </div>
     <ng-container *ngIf="!isConnection">
       <app-offline-notification></app-offline-notification>

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

@@ -1,6 +1,6 @@
 import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { SafeUrl } from '@angular/platform-browser';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
 import { Capacitor } from '@capacitor/core';
 import { Directory, FileInfo, Filesystem } from '@capacitor/filesystem';
@@ -28,6 +28,9 @@ interface LocalFile {
   ],
 })
 export class ImageUploaderComponent implements ControlValueAccessor {
+  constructor(domSanitizer: DomSanitizer) {
+    this.domSanitizer = domSanitizer;
+  }
   @Input() public hasCaption: boolean;
   @Input() public requiredError?: boolean;
   @Input() public isConnection: boolean;
@@ -41,6 +44,7 @@ export class ImageUploaderComponent implements ControlValueAccessor {
   upload = false;
   onChange: any = () => {};
   onTouched: any = () => {};
+  domSanitizer: DomSanitizer;
 
   writeValue(obj: any): void {
     if (obj) {
@@ -97,16 +101,18 @@ export class ImageUploaderComponent implements ControlValueAccessor {
     this.fileName = new Date().getTime() + '.jpeg';
     const filePath = `${IMAGE_DIR}/${this.fileName}`;
     try {
-      const savedFile = await Filesystem.writeFile({
-        directory: Directory.Data,
-        path: filePath,
-        data: base64Data,
-      });
       // const file = await this.loadFile();
 
-      if (Capacitor.getPlatform() === 'hybrid') {
+      if (['hybrid'].includes(Capacitor.getPlatform())) {
         // Display the new image by rewriting the 'file://' path to HTTP
         // Details: https://ionicframework.com/docs/building/webview#file-protocol
+
+        const savedFile = await Filesystem.writeFile({
+          directory: Directory.Data,
+          path: filePath,
+          data: base64Data,
+        });
+
         this.photo = {
           name: this.fileName,
           path: savedFile.uri,
@@ -124,18 +130,20 @@ export class ImageUploaderComponent implements ControlValueAccessor {
       }
 
       this.upload = true;
-      this.preview = null;
+      // this.preview = photo;
     } catch (e) {
       console.log(e);
     }
   }
 
   async deleteSelectedImage() {
     try {
-      await Filesystem.deleteFile({
-        directory: Directory.Data,
-        path: this.photo!.path,
-      });
+      if (Capacitor.getPlatform() === 'hybrid') {
+        await Filesystem.deleteFile({
+          directory: Directory.Data,
+          path: this.photo!.path,
+        });
+      }
       this.photo = null;
       this.upload = false;
       this.preview = null;

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

@@ -1,4 +1,5 @@
 export * from './post-edit.form';
 export * from './convert-image';
 export * from './upload-file';
+export * from './upload-file-progress';
 export * from './post-helper';

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

@@ -0,0 +1,47 @@
+import { HttpEventType, HttpProgressEvent } from '@angular/common/http';
+import { Directory, Filesystem } from '@capacitor/filesystem';
+import { MediaService } from '@mzima-client/sdk';
+import { lastValueFrom, Observable, tap } from 'rxjs';
+
+export class UploadFileProgressHelper {
+  constructor(private mediaService: MediaService) {}
+
+  async uploadFileField(
+    field: any,
+    { data, name, caption, path }: any,
+    progressCallback: (progress: number) => void,
+  ) {
+    try {
+      const fetchPhoto = await fetch(data);
+      const blob = await fetchPhoto.blob();
+      const file = new File([blob], name);
+      const uploadProgress: Observable<any> = this.mediaService
+        .uploadFileProgress(file, caption)
+        .pipe(
+          tap((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+              const progressEvent: HttpProgressEvent = event as HttpProgressEvent;
+              const percentDone = progressEvent.total
+                ? progressEvent.loaded / progressEvent.total
+                : 0;
+              progressCallback(percentDone);
+            }
+          }),
+        );
+      const event: any = await lastValueFrom(uploadProgress);
+
+      if (event?.body?.result?.id) {
+        field.value = { value: event.body.result.id };
+      }
+
+      Filesystem.deleteFile({
+        directory: Directory.Data,
+        path: path,
+      });
+    } catch (error: any) {
+      throw new Error(`Error uploading file: ${error.message}`);
+    }
+
+    return field;
+  }
+}

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

@@ -2,6 +2,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
 import { SortByFieldModule } from '@pipes';
@@ -24,6 +25,7 @@ import { PostEditRoutingModule } from './post-edit.routing.module';
     TranslateModule,
     PostComponentsModule,
     SortByFieldModule,
+    MatProgressBarModule,
   ],
   declarations: [PostEditPage],
 })

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

@@ -355,6 +355,7 @@ <h2 class="task-label">{{ task.label }}</h2>
                 "
               >
               </app-image-uploader>
+              <ion-progress-bar [value]="uploadProgress$[field.id] | async"></ion-progress-bar>
             </div>
           </ng-container>
 
@@ -521,13 +522,25 @@ <h2 class="task-label">{{ task.label }}</h2>
       <app-button
         expand="inline"
         type="button"
-        *ngIf="form"
-        [disabled]="form.disabled || form.invalid || emptyLocation || (!requireApproval || post?.status === 'published' ? taskForm.invalid : false)"
+        *ngIf="form && isSubmitting !== 'complete'"
+        [disabled]="isSubmitting==='yes' || form.disabled || form.invalid || emptyLocation || (!requireApproval || post?.status === 'published' ? taskForm.invalid : false)"
         (buttonClick)="submitPost()"
+        [ngSwitch]="isSubmitting"
+        class="submit-button"
       >
-        Submit
+        <ng-container *ngSwitchCase="'yes'">
+          <app-spinner></app-spinner>
+          Submitting
+        </ng-container>
+        <ng-container *ngSwitchCase="'no'"> Submit </ng-container>
       </app-button>
-      <app-button color="medium" fill="outline" expand="inline" (buttonClick)="backNavigation()">
+      <app-button
+        *ngIf="isSubmitting==='no'"
+        color="medium"
+        fill="outline"
+        expand="inline"
+        (buttonClick)="cancelPost()"
+      >
         Cancel
       </app-button>
     </ion-buttons>

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

@@ -69,11 +69,32 @@
 }
 
 .form-controls-panel {
+  display: flex;
+  flex: 1 1;
+  flex-direction: row;
   gap: 8px;
-
   app-button {
     --button-padding-start: 24px;
     --button-padding-end: 24px;
+    width: 100%;
+    ::ng-deep ion-button {
+      width: 100%;
+    }
+
+    &.submit-button {
+      ::ng-deep ion-button span {
+        display: flex;
+        flex-direction: row;
+        app-spinner {
+          display: block;
+          margin-inline: 4px;
+          --spinner-size: 16px;
+          ::ng-deep ion-spinner {
+            color: #fff;
+          }
+        }
+      }
+    }
   }
 }