add image to chat

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

@@ -46,6 +46,11 @@
         </div>
         <div>
           <ion-label>{{msg.msg}}</ion-label>
+          <div *ngIf="msg.attachments">
+            <div *ngFor="let file of msg.attachments">
+              <img src="{{file.image_url}}" alt="image" >
+            </div>
+          </div>
           {{last ? scrollToBottom() : ''}}
         </div>
       </div>
@@ -71,9 +76,6 @@
       </div>
     </div>
   </div>
-  <!-- <div *ngIf="leaveStatus" class="info-text-leave">
-    <ion-label>{{leaveStatus}}</ion-label>
-  </div> -->
 
 </ion-content>
 

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

@@ -11,6 +11,8 @@ import { Router } from '@angular/router'
 import { ChatOptionsPopoverPage } from '../../popover/chat-options-popover/chat-options-popover.page';
 import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/chat-options-features.page';
 import { TimeService } from 'src/app/services/functions/time.service';
+import { FileLoaderService } from 'src/app/services/file/file-loader.service';
+import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 
 @Component({
   selector: 'app-group-messages',
@@ -22,7 +24,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   isGroupCreated:boolean;
   loggedUser: any;
   message:any;
-  leaveStatus:any;
   messages:any;
   allUsers:any[] = [];
 
@@ -31,6 +32,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   roomName:any;
   members:any;
 
+  capturedImage:any;
+  capturedImageTitle:any;
+
   loggedUserChat:any;
   scrollingOnce:boolean = true;
   private scrollChangeCallback: () => void;
@@ -58,6 +62,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     private alertService: AlertService,
     private route: Router,
     private timeService: TimeService,
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -218,20 +224,19 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   sendMessage(){
-
     let body = {
       "message":
       {
         "rid": this.roomId,
         "msg": this.message,
-        "attachments": [{
+        /* "attachments": [{
           "color": "#ff0000",
           "text": "Yay for gruggy!",
           "title": "Attachment Example",
           "title_link": "https://youtube.com",
           "title_link_download": false,
-          "image_url": "http://res.guggy.com/logo_128.png",
-        }]
+          "image_url": "https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png",
+        }] */
       }
     }
 
@@ -292,7 +297,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     modal.onDidDismiss().then(res=>{
       console.log(res);
       if(res.data == 'leave'){
-        //this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
         this.getRoomInfo();
         this.closeAllDesktopComponents.emit();
         this.showEmptyContainer.emit();
@@ -355,6 +359,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
   }
   async openChatOptions(ev: any) {
+    alert('THIS');
     const popover = await this.popoverController.create({
       component: ChatOptionsPopoverPage,
       cssClass: 'chat-options-popover',
@@ -365,7 +370,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       },
       translucent: true
     });
-    return await popover.present();
+    await popover.present();
+    await popover.onDidDismiss().then(()=>{
+      alert('THIS2');
+    });
   }
   async addContacts(){
     console.log(this.members);
@@ -416,6 +424,43 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
  */
 
+  loadPicture() {
+    const input = this.fileLoaderService.createInput({
+      accept: ['image/apng', 'image/jpeg', 'image/png']
+    })
+
+    input.onchange = async () => {
+      const file = this.fileLoaderService.getFirstFile(input)
+
+      console.log(file);
+
+      const imageData =  await this.fileToBase64Service.convert(file)
+      this.capturedImage = imageData;
+      this.capturedImageTitle = file.name;
+
+      let body = {
+        "message":
+        {
+          "rid": this.roomId,
+          "msg": "",
+          "attachments": [{
+            //"title": this.capturedImageTitle ,
+            //"text": "description",
+            "title_link_download": false,
+            "image_url": this.capturedImage,
+          }]
+        }
+      }
+
+      this.chatService.sendMessage(body).subscribe(res=> {
+        console.log(res);
+      },(error) => {
+
+      });
+      //console.log(this.capturedImage)
+    };
+  }
+
   async _openChatOptions() {
 
     const enterAnimation = (baseEl: any) => {
@@ -463,6 +508,9 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
         }
         this.openNewEventPage.emit(data);
       }
+      else if(res['data'] == 'picture'){
+        this.loadPicture();
+      }
 
     });
   }