add image to chat

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

@@ -47,6 +47,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>
@@ -72,9 +77,6 @@
       </div>
     </div>
   </div>
-  <div *ngIf="leaveStatus" class="info-text-leave">
-    <ion-label>{{leaveStatus}}</ion-label>
-  </div>
 
 </ion-content>
 <!--

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

@@ -11,6 +11,8 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
 import {Router} from '@angular/router'
 import { EditGroupPage } from '../edit-group/edit-group.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, AfterViewInit, OnDestroy {
   isGroupCreated:boolean;
   loggedUser: any;
   message:any;
-  leaveStatus:any;
   messages:any;
 
   room:any;
@@ -40,6 +41,9 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   currentPosition: any;
   startPosition: number;
 
+  capturedImage:any;
+  capturedImageTitle:any;
+
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
@@ -53,6 +57,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private alertService: AlertService,
     private route: Router,
     private timeService: TimeService,
+    private fileLoaderService: FileLoaderService,
+    private fileToBase64Service: FileToBase64Service,
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -258,7 +264,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     await modal.present();
     modal.onDidDismiss().then(res=>{
       if(res.data == 'leave'){
-        this.leaveStatus = this.loggedUser.me.name + ' saiu do grupo';
+        console.log('saiu do grupo');
       }
       else if(res.data == 'cancel'){
         console.log('cancel');
@@ -269,6 +275,43 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  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(ev?: any) {
     console.log(this.members);
 
@@ -283,7 +326,12 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       },
       translucent: true
     });
-    return await popover.present();
+    await popover.present();
+    await popover.onDidDismiss().then((res)=>{
+      if(res['data'] == "picture"){
+        this.loadPicture();
+      }
+    });
   }
 
   async addContacts(){