file upload is added

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -5,9 +5,16 @@
   fxLayoutAlign="center center"
 >
   <div class="add-option">
-    <button mat-icon-button class="material-icons">
+    <button mat-icon-button class="material-icons" (click)="onClickFileInput()">
       <mat-icon>attach_file</mat-icon>
     </button>
+    <input
+      type="file"
+      #fileInput
+      style="display: none"
+      multiple
+      (change)="onChangeFileInput()"
+    />
 
     <button mat-icon-button class="material-icons">
       <mat-icon>sentiment_satisfied_alt</mat-icon>

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts

@@ -3,7 +3,8 @@ import {
   OnInit,
   Output,
   EventEmitter,
-  ViewChild
+  ViewChild,
+  ElementRef
 } from '@angular/core';
 import { NgForm } from '@angular/forms';
 
@@ -16,9 +17,15 @@ export class FormComponent implements OnInit {
   @Output()
   send = new EventEmitter<string>();
 
+  @Output()
+  sendFiles = new EventEmitter<File[]>();
+
   @ViewChild('replyForm', { static: false })
   replyForm: NgForm;
 
+  @ViewChild('fileInput', { static: false })
+  fileInput: ElementRef<HTMLInputElement>;
+
   constructor() {}
 
   ngOnInit() {}
@@ -29,4 +36,16 @@ export class FormComponent implements OnInit {
     this.send.emit(this.replyForm.form.value.message);
     this.replyForm.reset();
   }
+
+  onClickFileInput() {
+    this.fileInput.nativeElement.click();
+  }
+
+  onChangeFileInput() {
+    const files: File[] = [];
+    for (let i = 0; i < this.fileInput.nativeElement.files.length; i++) {
+      files.push(this.fileInput.nativeElement.files.item(i));
+    }
+    this.sendFiles.emit(files);
+  }
 }