fix: file upload component (#1117)

Fixes: #1116

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.html

@@ -15,7 +15,7 @@
             <input formControlName="description" matInput />
         </mat-form-field>
 
-        <input type="file" name="file" (change)="onFileSelect($event)" />
+        <mifosx-file-upload flex="60%" (change)="onFileSelect($event)"></mifosx-file-upload>
 
         <mat-dialog-actions align="end">
             <button mat-raised-button mat-dialog-close>Cancel</button>

src/app/clients/clients-view/custom-dialogs/upload-document-dialog/upload-document-dialog.component.ts

@@ -8,14 +8,22 @@ import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'
   styleUrls: ['./upload-document-dialog.component.scss']
 })
 export class UploadDocumentDialogComponent implements OnInit {
+
   /** Upload Document form. */
   uploadDocumentForm: FormGroup;
-  file: any;
+  /** Upload Document Data */
   uploadDocumentData: any = [];
+  /** Triggers description field */
   documentIdentifier = false;
+
+  /**
+   * @param {MatDialogRef} dialogRef Dialog reference element
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {any} data Dialog Data
+   */
   constructor(public dialogRef: MatDialogRef<UploadDocumentDialogComponent>,
-    private formBuilder: FormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: any) {
+              private formBuilder: FormBuilder,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
     this.documentIdentifier = data.documentIdentifier;
   }
 
@@ -33,12 +41,18 @@ export class UploadDocumentDialogComponent implements OnInit {
       'file': ['']
     });
   }
-  onFileSelect(event: any) {
-    if (event.target.files.length > 0) {
-      const file = event.target.files[0];
+
+  /**
+   * Sets file form control value.
+   * @param {any} $event file change event.
+   */
+  onFileSelect($event: any) {
+    if ($event.target.files.length > 0) {
+      const file = $event.target.files[0];
       this.uploadDocumentForm.get('file').setValue(file);
     }
   }
+
 }
 
 

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
 );
 
 /**