Download file working

src/app/pages/chat/messages/messages.page.html

@@ -61,7 +61,7 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments let i = index">
               <div (click)="downloadFileMsg(msg)">
-                <img *ngIf="msg.image_url" src="{{msg.image_url}}" alt="image">
+                <img *ngIf="msg.image_url" src={{msg.image_url}} alt="image">
               </div>
               <div>
                 <div>

src/app/pages/chat/messages/messages.page.ts

@@ -591,6 +591,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
       this.sqlservice.getAllChatMSG(roomId).then((msg: any) => {
+        console.log('ALL MSG DBBB', msg)
         let chatmsgArray = [];
         let array = []
         msg.forEach(element => {
@@ -606,7 +607,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
             rid: element.Rid,
             ts: element.Ts,
             u: this.isJson(element.U),
-            _updatedAt: element.UpdatedAt
+            _updatedAt: element.UpdatedAt,
+            image_url: this.isJson(element.image_url)
           }
 
           chatmsgArray.push(msgChat)
@@ -787,11 +789,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
             console.log('SAVED FILE WEB error ', error)
           });
 
-          const readFile = await Filesystem.readdir({
+          const readFile = await Filesystem.readFile({
             path: `${IMAGE_DIR}/${name}`,
             directory: Directory.Data,
           }).then((foo) => {
             console.log('GET FILE WEB', foo)
+            
           });
         }
 

src/app/services/sqlite.service.ts

@@ -279,8 +279,8 @@ export class SqliteService {
   public addChatMSG(data) {
     console.log('INSIDE DB CHAT MSG',data,)
     this.dbInstance.executeSql(`
-      INSERT OR IGNORE INTO ${this.chatmsg} (Id,Attachments,Channels,File,Mentions,Msg,Rid, Ts ,U, UpdatedAt,image_url) 
+      INSERT OR IGNORE INTO ${this.chatmsg} (Id,Attachments,Channels,File,Mentions,Msg,Rid, Ts ,U, UpdatedAt) 
-      VALUES ('${data._id}','${JSON.stringify(data.attachments)}','${JSON.stringify(data.channels)}','${JSON.stringify(data.file)}','${JSON.stringify(data.mentions)}','${data.msg}','${data.rid}','${data.ts}','${JSON.stringify(data.u)}','${data._updatedAt}','${JSON.stringify(data.image_url)}')`, [])
+      VALUES ('${data._id}','${JSON.stringify(data.attachments)}','${JSON.stringify(data.channels)}','${JSON.stringify(data.file)}','${JSON.stringify(data.mentions)}','${data.msg}','${data.rid}','${data.ts}','${JSON.stringify(data.u)}','${data._updatedAt}')`, [])
       .then(() => {
         console.log("chat msg add with Success");
 
@@ -321,10 +321,12 @@ export class SqliteService {
 
   //updateChatMsg
   public updateChatMsg(id, data) {
+    let jsonId = JSON.stringify(id)
+    let jsondata = JSON.stringify(data)
     try {
       console.log("update action data", data)
       this.dbInstance.executeSql(`
-      UPDATE ${this.chatmsg} SET image_url = ? WHERE Id = ${id}`, [data])
+      UPDATE ${this.chatmsg} SET image_url = ? WHERE Id = ${jsonId}`, [jsondata])
         .then(() => {
           console.log("ChatMsg update with Success");
 

src/app/shared/chat/group-messages/group-messages.page.html

@@ -146,15 +146,15 @@
           <ion-fab-button (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <!-- <ion-fab-button (click)="addFile()" color="light">
+          <ion-fab-button (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button (click)="addImage()" color="light">
+          <ion-fab-button (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button class="hide-desktop" (click)="takePicture()" color="light">
+          <ion-fab-button class="hide-desktop" (click)="takePicture()" color="light">
             <ion-icon name="camera"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
           <ion-fab-button (click)="addFileWebtrix()" color="light">
             <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
           </ion-fab-button>

src/app/shared/chat/messages/messages.page.html

@@ -56,7 +56,7 @@
             
               <div (click)="openPreview(msg)">
                 <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
-                <img src="{{downloadFile}}" alt="image">
+                <img src={{msg.image_url}} alt="image">
               </div>
                 <div>
                   <div class="file">
@@ -110,15 +110,15 @@
           <ion-fab-button (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <!-- <ion-fab-button hidden (click)="addFile()" color="light">
+          <ion-fab-button hidden (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button (click)="addImage()" color="light">
+          <ion-fab-button (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
-          <!-- <ion-fab-button (click)="takePicture()" color="light">
+          <ion-fab-button (click)="takePicture()" color="light">
             <ion-icon name="camera"></ion-icon>
-          </ion-fab-button> -->
+          </ion-fab-button>
           <ion-fab-button (click)="addFileWebtrix()" color="light">
             <ion-icon src="assets/icon/webtrix.svg"></ion-icon>
           </ion-fab-button>

src/app/shared/chat/messages/messages.page.ts

@@ -252,6 +252,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   transformData(res) {
     let mgsArray = [];
     res.forEach(async element => {
+      /* console.log('Web TRANSFORM MSG', element)
+      let image = await this.storageservice.get(element.file.guid);
+      console.log('IMAGE STORAGE', image) */
 
       let chatmsg = {
         _id: element._id,
@@ -264,17 +267,15 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         ts: element.ts,
         u: element.u,
         _updatedAt: element._updatedAt,
-        /* image_url: {
+        /* image_url: image, */
-          name: element.file.guid,
-          path: `${IMAGE_DIR}/${element.file.guid}`,
-          data: `data:image/jpeg;base64,${readFile.data}`,
-        }, */
       }
 
       mgsArray.push(chatmsg)
       
     });
 
+    console.log('Web TRANSFORM MSG', mgsArray)
+
     this.storageservice.store('chatmsg',mgsArray);
     
   }
@@ -283,7 +284,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     //this.showLoader = true;
     const roomId = this.roomId
     this.chatService.getRoomMessages(this.roomId).subscribe(res => {
-      console.log(res);
+      console.log('ALL MSG FROM CHATROCK',res);
       this.transformData(res['messages']);
       this.getMessageDB();
       //this.getFileFromLakeFS();
@@ -728,17 +729,69 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     card.el.style['z-index'] = 11;
   }
 
+  downloadFileMsg(msg) {
+    console.log('FILE TYPE', msg.file.type)
+    this.downloadFile = "";
+    if (msg.file.type == "application/img") {
+      this.fileService.downloadFile(msg.file.guid).subscribe(async (event) => {
+        console.log('FILE TYPE 22', msg.file.guid)
+        var name = msg.file.guid;
+
+        if (event.type === HttpEventType.DownloadProgress) {
+          //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
+          console.log('FILE TYPE 33', msg.file.type)
+        } else if (event.type === HttpEventType.Response) {
+          this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+          console.log('FILE TYPE 44', this.downloadFile)
+
+          console.log('TRY ARRAY BUFFER NAME', name);
+          console.log('TRY ARRAY BUFFER', this.downloadFile);
+
+          this.storageservice.store(msg.file.guid,this.downloadFile);
+
+          await Filesystem.writeFile({
+            path: `${IMAGE_DIR}/${name}`,
+            data: this.downloadFile,
+            directory: Directory.Data
+          }).then((foo) => {
+            console.log('SAVED FILE WEB', foo)
+          }).catch((error) => {
+            console.log('SAVED FILE WEB error ', error)
+          });
+
+          const readFile = await Filesystem.readFile({
+            path: `${IMAGE_DIR}/${name}`,
+            directory: Directory.Data,
+          }).then((foo) => {
+            console.log('GET FILE WEB', foo)
+            
+          });
+        }
+
+      });
+
+      console.log('FILE TYPE 44', this.downloadFile)
+
+    }
+
+  }
+
   async openPreview(msg) {
-    const modal = await this.modalController.create({
+    if(msg.image_url = "") {
-      component: ViewMediaPage,
+      const modal = await this.modalController.create({
-      cssClass: 'modal modal-desktop',
+        component: ViewMediaPage,
-      componentProps: {
+        cssClass: 'modal modal-desktop',
-        image: msg.attachments[0].image_url,
+        componentProps: {
-        username: msg.u.name,
+          image: msg.attachments[0].image_url,
-        _updatedAt: msg._updatedAt
+          username: msg.u.name,
-      }
+          _updatedAt: msg._updatedAt
-    });
+        }
-    modal.present();
+      });
+      modal.present();
+    } else {
+      this.downloadFileMsg(msg)
+    }
+    
   }
 }
 

src/app/shared/popover/chat-options-popover/chat-options-popover.page.html

@@ -6,9 +6,9 @@
     </button>
   </div>
   <div class="buttons">
-    <button hidden (click)="takePicture()" full class="btn-ok" shape="round" >Tirar Fotografia</button>
+    <button  (click)="takePicture()" full class="btn-ok" shape="round" >Tirar Fotografia</button>
-    <button hidden (click)="addFile()" class="btn-ok" shape="round" >Anexar Documento</button>
+    <button  (click)="addFile()" class="btn-ok" shape="round" >Anexar Documento</button>
-    <button hidden (click)="anexarFoto()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
+    <button  (click)="anexarFoto()" full class="btn-ok" shape="round" >Anexar Fotografia</button>
     <button (click)="addDocGestaoDocumental()" class="btn-ok" shape="round" >Gestão Documental</button>
     <div class="solid"></div>
     <button (click)="bookMeeting()" class="btn-ok" shape="round" >Novo Evento</button>