upload attachment

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

@@ -55,7 +55,7 @@
             {{ message.message }}
           </div>
 
-          <div *ngFor="let attachment of message.attachment">
+          <div *ngFor="let attachment of message.attachments; let i = index">
             <div *ngIf="attachment.fileType == 1">
 
               <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
@@ -66,6 +66,10 @@
 
             </div>
 
+            <div *ngIf="attachment.fileType == 2">
+              <img [src]="attachment.safeFile">
+            </div>
+
           </div>
 
         </div>
@@ -107,13 +111,6 @@
 
 
   </div>
-<!--
-  <ion-fab horizontal="end" vertical="bottom" slot="fixed">
-    <ion-fab-button *ngIf="scrollToBottomBtn"  color="light" size="small">
-      <ion-icon name="chevron-down"></ion-icon>
-    </ion-fab-button>
-  </ion-fab> -->
-
 
 
   <ion-fab horizontal="start" vertical="bottom" slot="fixed">
@@ -123,25 +120,6 @@
     </div>
   </ion-fab>
 
-
-    <!-- <div *ngIf="userTyping$?.typingList?.typingList">
-
-    <div
-      *ngFor="let message of userTyping$.typingList.typingList " class="messages-list-item-wrapper"
-    >
-      {{ message.userName }}
-    </div>
-  </div>
- -->
-  <!-- <div *ngIf="userTyping$" class="header-bottom-contacts" >
-
-    <div *ngFor="let typing of userTyping$; let i = index">
-      {{ typing.userName }}<div *ngIf="i < userTyping$.length - 1">, </div>
-    </div>
-  </div>
- -->
-
-
 </ion-content>
 
 

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

@@ -37,7 +37,7 @@ import { MessageEntity } from 'src/app/module/chat/domain/entity/message';
 import { MemberTable } from 'src/app/module/chat/infra/database/dexie/schema/members';
 import { TypingTable } from 'src/app/module/chat/infra/database/dexie/schema/typing';
 import { MessageAttachmentFileType, MessageAttachmentSource } from 'src/app/module/chat/data/dto/message/messageOutputDTO';
-import { JSFileToBase64 } from 'src/app/utils/ToBase64';
+import { JSFileToDataUrl } from 'src/app/utils/ToBase64';
 import { CameraService } from 'src/app/infra/camera/camera.service'
 import { compressImageBase64 } from '../../../utils/imageCompressore';
 import { FilePickerWebService } from 'src/app/infra/file-picker/web/file-picker-web.service'
@@ -192,8 +192,35 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   async getMessages() {
     this.messages1[this.roomId] = []
 
-    const messages = await this.messageRepositoryService.getItems(this.roomId)
+    let messages = await this.messageRepositoryService.getItems(this.roomId)
+
     this.messages1[this.roomId].unshift(...messages)
+    this.loadAttachment()
+
+    setTimeout(() => {
+      this.scrollToBottomClicked()
+    }, 100)
+    
+  }
+
+  async loadAttachment() {
+    for(const message of this.messages1[this.roomId]) {
+      if(message.hasAttachment) {
+          
+        const result = await this.chatServiceService.getMessageAttachmentByMessageId({
+          $messageId: message.$id,
+          id: message.attachments[0].id 
+        })
+
+        if(result.isOk()) {
+            
+          message.attachments[0].safeFile = result.value
+
+        }
+      }
+
+    }
+    
   }
 
   listenToIncomingMessage() {
@@ -226,7 +253,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.messageUpdateSubject?.unsubscribe();
 
     this.messageUpdateSubject = this.chatServiceService.listenToUpdateMessage(this.roomId).subscribe((updateMessage) => {
-      console.log('update message', updateMessage);
 
       const index = this.messages1[this.roomId].findIndex(e => e?.id === updateMessage.id); // Use triple equals for comparison
 
@@ -254,6 +280,14 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
         this.messages1[this.roomId][index].id = updateMessage.id
 
+        let attachmentIndex = 0;
+
+        for(const message of updateMessage.attachments) {
+          console.log('set attachmen id', message)
+          this.messages1[this.roomId][index].attachments[attachmentIndex].id = message.id
+          attachmentIndex++;
+        }
+
       } else {
         // console.log('message not found');
       }
@@ -856,7 +890,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
             fileType: MessageAttachmentFileType.Image,
             mimeType: 'image/'+file.value.format,
             description: ''
-
           }]
 
           this.messages1[this.roomId].push(message)
@@ -891,7 +924,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
         console.log('FILE rigth?', file)
 
-        let fileBase64  = await JSFileToBase64(file.value);
+        let fileBase64  = await JSFileToDataUrl(file.value);
 
         if(fileBase64.isOk()) {