From ac215d59febddf48990ade3d32d57ce104b7398c Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 15 Dec 2020 16:08:56 +0100
Subject: [PATCH] Angular Forms In Depth

---
 src/app/file-upload/file-upload.component.html | 15 +++++++++++++++
 src/app/file-upload/file-upload.component.ts   |  2 ++
 2 files changed, 17 insertions(+)

diff --git a/src/app/file-upload/file-upload.component.html b/src/app/file-upload/file-upload.component.html
index 139597f..148c728 100644
--- a/src/app/file-upload/file-upload.component.html
+++ b/src/app/file-upload/file-upload.component.html
@@ -1,2 +1,17 @@
 
+<input type="file" class="file-input">
 
+<div class="file-upload">
+
+    <mat-form-field>
+
+        <input matInput [disabled]="true" [value]="fileName">
+
+    </mat-form-field>
+
+    <button mat-mini-fab color="primary" class="upload-btn">
+        <mat-icon>attach_file</mat-icon>
+
+    </button>
+
+</div>
diff --git a/src/app/file-upload/file-upload.component.ts b/src/app/file-upload/file-upload.component.ts
index bd6b1ba..571b1a1 100644
--- a/src/app/file-upload/file-upload.component.ts
+++ b/src/app/file-upload/file-upload.component.ts
@@ -15,4 +15,6 @@ export class FileUploadComponent {
     @Input()
     requiredFileType:string;
 
+    fileName = '';
+
 }