From feb398b6d93c678f74d12351a887bf5f9c5e079f Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Tue, 29 Oct 2019 18:17:48 +0900
Subject: [PATCH] file upload is added

---
 .../src/lib/components/form.component.html    |  9 +++++++-
 .../src/lib/components/form.component.ts      | 21 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
index ac18a03b..23994ccb 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
+++ b/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>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
index a5d76886..5288b19d 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.ts
+++ b/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);
+  }
 }