fix: file upload component (#1117)

Fixes: #1116

src/app/shared/file-upload/file-upload.component.html

@@ -1,13 +1,17 @@
 <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="2%">
-  <mat-form-field fxFlex="83%">
-    <input matInput [readonly]="true" [value]="fileName" placeholder="No file uploaded">
+
+  <mat-form-field [fxFlex]="flex || '83%'">
+    <input matInput [readonly]="true" [value]="fileName || ''" placeholder="No file selected">
   </mat-form-field>
-  <span fxFlex="13%" fxFlexAlign="center">
+
+  <span fxFlex="10%" fxFlexAlign="center">
     <button mat-button (click)="uploadFile.click()">
-      <fa-icon icon="file-upload" size="lg"></fa-icon>
+      <fa-icon icon="folder-open" size="lg"></fa-icon>
       &nbsp;&nbsp;
-      Upload a file
+      Browse
     </button>
   </span>
+
 </div>
-<input type="file" #uploadFile (change)="onFileSelected($event)" [style.display]="'none'">
+
+<input type="file" #uploadFile (change)="onFileSelect($event)" [style.display]="'none'">

src/app/shared/file-upload/file-upload.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 /**
  * Custom file upload component based on angular material.
@@ -9,21 +9,20 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './file-upload.component.html',
   styleUrls: ['./file-upload.component.scss']
 })
-export class FileUploadComponent implements OnInit {
+export class FileUploadComponent {
 
-  /** Name of file. */
-  fileName = '';
+  /** Form field flex dimension */
+  @Input() flex: any;
+  /** Selected file name */
+  fileName: File;
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
   /**
-   * Uploads a file.
-   * @param {any} event The file input change event.
+   * Sets the file name.
+   * @param {any} event File input change event.
    */
-  onFileSelected($event: any) {
+  onFileSelect($event: any) {
     this.fileName = $event.target.files[0].name;
   }
 

src/app/shared/icons.module.ts

@@ -92,7 +92,8 @@ import {
   faPen,
   faFlag,
   faArrowUp,
-  faArrowDown
+  faArrowDown,
+  faFolderOpen
 } from '@fortawesome/free-solid-svg-icons';
 
 /** Add icons to the library for convenient access in other components. */
@@ -184,7 +185,8 @@ library.add(
   faPen,
   faFlag,
   faArrowUp,
-  faArrowDown
+  faArrowDown,
+  faFolderOpen
 );
 
 /**