feat(file-upload): add cancel event when cancel button is pressed (c…

…loses #499) (#541) * feat(file-upload): add `cancel` event when cancel button is pressed and files are removed there is a need for the devs to know when a user clicks on the cancel button so they can handle it properly. * chore(file-input): update unit tests to be more specific with event tests
Teradata · May 7, 2017 · 9e3be77 · 9e3be77
1 parent dda9b4b
commit 9e3be77
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 10 deletions.
diff --git a/src/app/components/components/file-upload/file-upload.component.html b/src/app/components/components/file-upload/file-upload.component.html
@@ -9,7 +9,7 @@
         <h3 class="md-title">Single file selection or drop:</h3>
         <p>Select Event: {{fileSelectMsg}}</p>
         <p>Upload Event: {{fileUploadMsg}}</p>
-        <td-file-upload #singleFileUpload (select)="selectEvent($event)" (upload)="uploadEvent($event)" [disabled]="disabled">
+        <td-file-upload #singleFileUpload (select)="selectEvent($event)" (upload)="uploadEvent($event)" (cancel)="cancelEvent()" [disabled]="disabled">
           <md-icon>file_upload</md-icon><span>{{ singleFileUpload.files?.name }}</span>
           <ng-template td-file-input-label>
             <md-icon>attach_file</md-icon><span>Choose a file...</span>
@@ -29,7 +29,7 @@ <h3 class="md-title">Single file selection or drop:</h3>
           <![CDATA[
             <p>Select Event: { {fileSelectMsg} }</p>
             <p>Upload Event: { {fileUploadMsg} }</p>
-            <td-file-upload #singleFileUpload (select)="selectEvent($event)" (upload)="uploadEvent($event)" [disabled]="disabled">
+            <td-file-upload #singleFileUpload (select)="selectEvent($event)" (upload)="uploadEvent($event)" (cancel)="cancelEvent()" [disabled]="disabled">
               <md-icon>file_upload</md-icon><span>{ { singleFileUpload.files?.name } }</span>
               <ng-template td-file-input-label>
                 <md-icon>attach_file</md-icon><span>Choose a file...</span>
@@ -49,11 +49,16 @@ <h3 class="md-title">Single file selection or drop:</h3>
 
               selectEvent(file: File): void {
                 this.fileSelectMsg = file.name;
-              };
+              }
 
               uploadEvent(file: File): void {
                 this.fileUploadMsg = file.name;
-              };
+              }
+
+              cancelEvent(): void {
+                this.fileSelectMsg = 'No file selected yet.';
+                this.fileUploadMsg = 'No file uploaded yet.';
+              }
 
               toggleDisabled(): void {
                 this.disabled = !this.disabled;
@@ -75,7 +80,7 @@ <h3 class="md-title">Single file selection or drop:</h3>
         <h3 class="md-title">Multiple selection/drop for only .sql files and custom color palette:</h3>
         <p>Select Event: {{fileSelectMultipleMsg}}</p>
         <p>Upload Event: {{fileUploadMultipleMsg}}</p>
-        <td-file-upload #fileMultipleUpload (select)="selectMultipleEvent($event)" (upload)="uploadMultipleEvent($event)"
+        <td-file-upload #fileMultipleUpload (select)="selectMultipleEvent($event)" (upload)="uploadMultipleEvent($event)" (cancel)="cancelMultipleEvent()"
                         accept=".sql" defaultColor="accent" activeColor="warn" cancelColor="primary" multiple [disabled]="disabled">
           <md-icon>file_upload</md-icon>
           <span>{{ fileMultipleUpload.files?.name || fileMultipleUpload.files?.length }} <span *ngIf="fileMultipleUpload.files?.length">files selected</span></span>
@@ -97,7 +102,7 @@ <h3 class="md-title">Multiple selection/drop for only .sql files and custom colo
           <![CDATA[
             <p>Select Event: { {fileSelectMultipleMsg} }</p>
             <p>Upload Event: { {fileUploadMultipleMsg} }</p>
-            <td-file-upload #fileMultipleUpload (select)="selectMultipleEvent($event)" (upload)="uploadMultipleEvent($event)"
+            <td-file-upload #fileMultipleUpload (select)="selectMultipleEvent($event)" (upload)="uploadMultipleEvent($event)" (cancel)="cancelMultipleEvent()"
                             accept=".sql" defaultColor="accent" activeColor="warn" cancelColor="primary" multiple [disabled]="disabled">
               <md-icon>file_upload</md-icon>
               <span>
@@ -139,6 +144,11 @@ <h3 class="md-title">Multiple selection/drop for only .sql files and custom colo
                   this.fileUploadMultipleMsg = files.name;
                 }
               }
+
+              cancelMultipleEvent(): void {
+                this.fileSelectMultipleMsg = 'No file(s) selected yet.';
+                this.fileUploadMultipleMsg = 'No file(s) uploaded yet.';
+              }
             }
           ]]>
         </td-highlight>

diff --git a/src/app/components/components/file-upload/file-upload.component.ts b/src/app/components/components/file-upload/file-upload.component.ts
@@ -20,6 +20,11 @@ export class FileUploadDemoComponent {
   fileUploadMultipleMsg: string = 'No file(s) uploaded yet.';
   disabled: boolean = false;
 
+  cancelEvent(): void {
+    this.fileSelectMsg = 'No file selected yet.';
+    this.fileUploadMsg = 'No file uploaded yet.';
+  }
+
   selectEvent(file: File): void {
     this.fileSelectMsg = file.name;
   }
@@ -52,6 +57,11 @@ export class FileUploadDemoComponent {
     }
   }
 
+  cancelMultipleEvent(): void {
+    this.fileSelectMultipleMsg = 'No file(s) selected yet.';
+    this.fileUploadMultipleMsg = 'No file(s) uploaded yet.';
+  }
+
   toggleDisabled(): void {
     this.disabled = !this.disabled;
   }

diff --git a/src/platform/core/file/file-upload/README.md b/src/platform/core/file/file-upload/README.md
@@ -8,7 +8,7 @@ Example for usage:
 
 ```html
 <td-file-upload #fileUpload defaultColor="accent" activeColor="warn" cancelColor="primary" (select)="selectEvent($event)"
-  (upload)="uploadEvent($event)" accept=".ext,.anotherExt" [disabled]="disabled" multiple>
+  (upload)="uploadEvent($event)" (cancel)="cancelEvent()" accept=".ext,.anotherExt" [disabled]="disabled" multiple>
   <md-icon>file_upload</md-icon><span>{{ fileUpload.files?.name }}</span>
   <ng-template td-file-input-label>
     <md-icon>attach_file</md-icon><span>Choose a file...</span>
@@ -27,15 +27,19 @@ export class Demo {
     } else {
       ...
     }
-  };
+  }
 
   uploadEvent(files: FileList | File): void {
     if (files instanceof FileList) {
       ...
     } else {
       ...
     }
-  };
+  }
+
+  cancelEvent(): void {
+    ...
+  }
 } 
 ```
 
@@ -53,6 +57,7 @@ Properties:
 | `disabled` | `boolean` | Disables [TdFileUploadComponent] and clears selected/dropped files.
 | `upload` | `function($event)` | Event emitted when upload button is clicked. Emits a [File or FileList] object.
 | `select` | `function($event)` | Event emitted when a file is selected. Emits a [File or FileList] object.
+| `cancel` | `function()` | Event emitted when cancel button is clicked.
 
 ## Setup
 

diff --git a/src/platform/core/file/file-upload/file-upload.component.spec.ts b/src/platform/core/file/file-upload/file-upload.component.spec.ts
@@ -116,6 +116,59 @@ describe('Component: FileUpload', () => {
     async(inject([], () => {
       let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileUploadBasicTestComponent);
       let component: TdFileUploadBasicTestComponent = fixture.debugElement.componentInstance;
+
+      let eventSpy: jasmine.Spy = spyOn(component, 'selectEvent');
+
+      component.multiple = false;
+      component.disabled = false;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(fixture.debugElement.query(By.css('td-file-input'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.td-file-upload'))).toBeFalsy();
+        expect(eventSpy.calls.count()).toBe(0);
+        fixture.debugElement.query(By.directive(TdFileUploadComponent)).componentInstance.handleSelect([{}]);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(eventSpy.calls.count()).toBe(1);
+        });
+      });
+  })));
+
+  it('should mimic file selection, upload click and throw (upload) event',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileUploadBasicTestComponent);
+      let component: TdFileUploadBasicTestComponent = fixture.debugElement.componentInstance;
+
+      let eventSpy: jasmine.Spy = spyOn(component, 'uploadEvent');
+
+      component.multiple = false;
+      component.disabled = false;
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(fixture.debugElement.query(By.css('td-file-input'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.td-file-upload'))).toBeFalsy();
+        expect(eventSpy.calls.count()).toBe(0);
+        fixture.debugElement.query(By.directive(TdFileUploadComponent)).componentInstance.handleSelect([{}]);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          expect(component.selectFiles).toBeTruthy();
+          expect(eventSpy.calls.count()).toBe(0);
+          fixture.debugElement.query(By.css('.td-file-upload')).triggerEventHandler('click', new Event('click'));
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(eventSpy.calls.count()).toBe(1);
+          });
+        });
+      });
+  })));
+
+  it('should mimic file selection, cancel click and throw (cancel) event',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdFileUploadBasicTestComponent);
+      let component: TdFileUploadBasicTestComponent = fixture.debugElement.componentInstance;
+
+      let eventSpy: jasmine.Spy = spyOn(component, 'cancelEvent');
+
       component.multiple = false;
       component.disabled = false;
       fixture.detectChanges();
@@ -126,6 +179,12 @@ describe('Component: FileUpload', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
           expect(component.selectFiles).toBeTruthy();
+          expect(eventSpy.calls.count()).toBe(0);
+          fixture.debugElement.query(By.css('.td-file-upload-cancel')).triggerEventHandler('click', new Event('click'));
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(eventSpy.calls.count()).toBe(1);
+          });
         });
       });
   })));
@@ -135,7 +194,8 @@ describe('Component: FileUpload', () => {
 @Component({
   selector: 'td-file-upload-basic-test',
   template: `
-  <td-file-upload #fileUpload [multiple]="multiple" [disabled]="disabled" (select)="selectFiles = $event" (upload)="files = $event">
+  <td-file-upload #fileUpload [multiple]="multiple" [disabled]="disabled" (select)="selectEvent($event)"
+                  (upload)="uploadEvent($event)" (cancel)="cancelEvent()">
     <span>{{ fileUpload.files?.name }}</span>
     <ng-template td-file-input-label>
       <span>Choose a file...</span>
@@ -149,4 +209,17 @@ class TdFileUploadBasicTestComponent {
   disabled: boolean;
   files: File | FileList;
   selectFiles: File | FileList;
+
+  selectEvent(files: File | FileList): void {
+    this.selectFiles = files;
+  }
+
+  uploadEvent(files: File | FileList): void {
+    this.files = files;
+  }
+
+  cancelEvent(): void {
+    this.selectFiles = undefined;
+    this.files = undefined;
+  }
 }
diff --git a/src/platform/core/file/file-upload/file-upload.component.ts b/src/platform/core/file/file-upload/file-upload.component.ts
@@ -83,6 +83,12 @@ export class TdFileUploadComponent {
    */
   @Output('upload') onUpload: EventEmitter<File | FileList> = new EventEmitter<File | FileList>();
 
+  /**
+   * cancel?: function
+   * Event emitted when cancel button is clicked.
+   */
+  @Output('cancel') onCancel: EventEmitter<void> = new EventEmitter<void>();
+
   constructor(private _changeDetectorRef: ChangeDetectorRef) {
 
   }
@@ -111,6 +117,7 @@ export class TdFileUploadComponent {
    */
   cancel(): void {
     this.files = undefined;
+    this.onCancel.emit(undefined);
     this._changeDetectorRef.markForCheck();
   }
 }