Adds Go File Upload

mobi · Aug 30, 2019 · 8364ecc · 8364ecc
1 parent f44418f
commit 8364ecc
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.html
@@ -1,12 +1,16 @@
 <div>
   <go-button
-    buttonIcon="add_shopping_cart"
-    buttonVariant="positive"
+    buttonIcon="{{buttonIcon}}"
+    buttonVariant="{{buttonVariant}}"
     (click)="filePicker.click()"
     #filePicker>
-    Upload File
+    {{label}}
   </go-button>
   <input type="file" #filePicker (change)="onFilePicked($event)" multiple>
 </div>
 
-<go-hint *ngFor="let hint of hints" [message]="hint" [theme]="light"></go-hint>
+<go-hint *ngFor="let file of filePreview" [message]="file" [theme]="light">
+</go-hint>
+
+<go-hint *ngFor="let hint of hints" [message]="hint" [theme]="light">
+</go-hint>
diff --git a/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts b/projects/go-lib/src/lib/components/go-file-upload/go-file-upload.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, FormArray, FormBuilder, AbstractControl } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { AbstractControl, FormArray, FormBuilder, FormGroup, FormControl } from '@angular/forms';
 
 @Component({
   selector: 'go-file-upload',
@@ -9,10 +9,15 @@ import { FormControl, FormGroup, FormArray, FormBuilder, AbstractControl } from
 export class GoFileUploadComponent implements OnInit {
 
   form: FormGroup;
-  control: FormArray;
+  files: FormArray;
   fb: FormBuilder;
-  filePreview: string;
-  hints: Array<string> = [];
+  filePreview: Array<string> = [];
+
+  @Input() buttonIcon: string;
+  @Input() control: FormControl;
+  @Input() buttonVariant: string;
+  @Input() label: string;
+  @Input() hints: Array<string> = [];
 
   constructor() { }
 
@@ -21,13 +26,17 @@ export class GoFileUploadComponent implements OnInit {
     this.form = this.fb.group({
       filesArray: this.fb.array([])
     });
-    this.control = <FormArray>this.form.controls['filesArray'];
+    this.files = <FormArray>this.form.controls['filesArray'];
+    this.files.valueChanges.subscribe( (fileChanges: any) => {
+      this.control.setValue(fileChanges);
+    });
   }
 
   onFilePicked(event: Event): void {
-    event.target.files.forEach((file: any) => {
-      this.control.push(this.patchValues(file));
-      debugger;
+    const target: HTMLInputElement = event.target as HTMLInputElement;
+    Array.from(target.files).forEach((file: any) => {
+      this.files.push(this.patchValues(file));
+      this.filePreview.push(file.name);
     });
   }
 

diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.html
@@ -37,7 +37,13 @@ <h2 class="go-heading-2">
               </div>
 
               <div class="go-column go-column--100">
-                <go-file-upload></go-file-upload>
+                <go-file-upload
+                  [control]="fileControl"
+                  buttonVariant="positive"
+                  buttonIcon="home"
+                  label="Upload File"
+                  [hints]="['You can upload multiple files']"
+                ></go-file-upload>
               </div>
 
               <div class="go-column go-column--50">

diff --git a/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts b/projects/go-tester/src/app/components/test-page-3/test-page-3.component.ts
@@ -6,6 +6,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
   templateUrl: './test-page-3.component.html'
 })
 export class TestPage3Component {
+  fileControl: FormControl = new FormControl();
   form: FormGroup = new FormGroup({
     food: new FormGroup({
       apples: new FormControl(''),