Merge pull request #120 from Garbanas/bugfix/upload-event-handling

Fix missing event reference causing exception in Firefox

Author: georgipeltekov

README.md

@@ -147,6 +147,7 @@ headertext  | Text to be displayed inside the drop box | headertext="Drop files
 customstyle  | Custom style class name to be used | customstyle="my-style"
 [disableIf]  | Conditionally disable the dropzone  | [disableIf]="condition"
 showBrowseBtn  | Whether browse file button should be shown  | showBrowseBtn="true"
+browseBtnLabel  | The label of the browse file button  | browseBtnLabel="Browse files"
 
 ## License
 

src/lib/ngx-drop/file-drop.component.html

@@ -1,12 +1,12 @@
-<div id="dropZone"  [className]="customstyle" [class.over]="dragoverflag"
+<div [className]="customstyle" [class.over]="dragoverflag"
     (drop)="dropFiles($event)"
     (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)">
     <div class="content">
         <ng-content></ng-content>
         {{headertext}}
         <div *ngIf="showBrowseBtn">
-            <input type="file" id="selectedFile" (change)="uploadFiles($event)" multiple style="display: none;" /> 
-            <input type="button" class="btn btn-primary btn-xs" value="Custom Btn " onclick="document.getElementById('selectedFile').click();" />       
+            <input type="file" #fileSelector (change)="uploadFiles($event)" multiple style="display: none;" />
+            <input type="button" class="btn btn-primary btn-xs" value="{{browseBtnLabel}}" (click)="onBrowseButtonClick($event)" />
         </div>        
     </div>
 </div>

src/lib/ngx-drop/file-drop.component.scss

@@ -12,6 +12,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .over{
   background-color: rgba(147, 147, 147, 0.5);
-}
+}

src/lib/ngx-drop/file-drop.component.ts

@@ -1,27 +1,37 @@
-import { Component, Input, Output, EventEmitter, NgZone, OnDestroy, Renderer } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NgZone,
+  OnDestroy,
+  Renderer2,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { timer, Subscription } from 'rxjs';
 
 import { UploadFile } from './upload-file.model';
 import { UploadEvent } from './upload-event.model';
-import { FileSystemFileEntry, FileSystemEntryMetadata, FileSystemEntry, FileSystemDirectoryEntry } from './dom.types';
+import { FileSystemFileEntry, FileSystemEntry, FileSystemDirectoryEntry } from './dom.types';
 
 @Component({
   selector: 'file-drop',
   templateUrl: './file-drop.component.html',
   styleUrls: ['./file-drop.component.scss']
 })
-
-
 export class FileComponent implements OnDestroy {
 
   @Input()
-  headertext: string = '';
+  public headertext: string = '';
+  @Input()
+  public customstyle: string = 'drop-zone';
   @Input()
-  customstyle: string = null;
+  public disableIf: boolean = false;
   @Input()
-  disableIf: boolean = false;
+  public showBrowseBtn: boolean = false;
   @Input()
-  showBrowseBtn: boolean = false;
+  public browseBtnLabel: string = 'Browse files';
 
   @Output()
   public onFileDrop: EventEmitter<UploadEvent> = new EventEmitter<UploadEvent>();
@@ -30,37 +40,34 @@ export class FileComponent implements OnDestroy {
   @Output()
   public onFileLeave: EventEmitter<any> = new EventEmitter<any>();
 
-  stack = [];
+  @ViewChild('fileSelector')
+  public fileSelector: ElementRef;
+
+  stack: string[] = [];
   files: UploadFile[] = [];
-  subscription: Subscription;
+  subscription: Subscription | null = null;
   dragoverflag: boolean = false;
 
   globalDisable: boolean = false;
   globalStart: Function;
   globalEnd: Function;
 
-  numOfActiveReadEntries = 0
-
-  length;
-  items;
+  numOfActiveReadEntries = 0;
 
   constructor(
     private zone: NgZone,
-    private renderer: Renderer
+    private renderer: Renderer2
   ) {
-    if (!this.customstyle) {
-      this.customstyle = 'drop-zone';
-    }
-    this.globalStart = this.renderer.listen('document', 'dragstart', (evt) => {
+    this.globalStart = this.renderer.listen('document', 'dragstart', (evt: Event) => {
       this.globalDisable = true;
     });
-    this.globalEnd = this.renderer.listen('document', 'dragend', (evt) => {
+    this.globalEnd = this.renderer.listen('document', 'dragend', (evt: Event) => {
       this.globalDisable = false;
     });
   }
 
   public onDragOver(event: Event): void {
-    if (!this.globalDisable && !this.disableIf) {
+    if (!this.isDropzoneDisabled()) {
       if (!this.dragoverflag) {
         this.dragoverflag = true;
         this.onFileOver.emit(event);
@@ -70,7 +77,7 @@ export class FileComponent implements OnDestroy {
   }
 
   public onDragLeave(event: Event): void {
-    if (!this.globalDisable && !this.disableIf) {
+    if (!this.isDropzoneDisabled()) {
       if (this.dragoverflag) {
         this.dragoverflag = false;
         this.onFileLeave.emit(event);
@@ -79,90 +86,97 @@ export class FileComponent implements OnDestroy {
     }
   }
 
-  dropFiles(event: any) {
-    this.dragoverflag = false;
-    event.dataTransfer.dropEffect = 'copy';
-    if (event.dataTransfer.items) {
-      this.length = event.dataTransfer.items.length;
-      this.items = event.dataTransfer.items;
-    } else {
-      this.length = event.dataTransfer.files.length;
-      this.items = event.dataTransfer.files;
+  public dropFiles(event: DragEvent): void {
+    if (!this.isDropzoneDisabled()) {
+      this.dragoverflag = false;
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
+        let items: FileList | DataTransferItemList;
+        if (event.dataTransfer.items) {
+          items = event.dataTransfer.items;
+        } else {
+          items = event.dataTransfer.files;
+        }
+        this.preventAndStop(event);
+        this.checkFiles(items);
+      }
     }
-    this.checkFiles(event);
   }
 
-  uploadFiles(event: any) {
-    if (event.srcElement) { 
-      this.items = event.srcElement.files;
-      this.length = this.items.length;
-      this.checkFiles(event);
+  public onBrowseButtonClick(event: MouseEvent): void {
+    if (this.fileSelector && this.fileSelector.nativeElement) {
+      (this.fileSelector.nativeElement as HTMLInputElement).click();
     }
   }
 
-  checkFiles(event: any) {
-    if (!this.globalDisable && !this.disableIf) {
-
-      for (let i = 0; i < this.length; i++) {
-        let entry: FileSystemEntry;
-        if(this.items[i].webkitGetAsEntry){
-          entry = this.items[i].webkitGetAsEntry();
-        }
-         
-        if (!entry) {
-          const file: File = this.items[i];
-          if (file) {
-            const fakeFileEntry: FileSystemFileEntry = {
-              name: file.name,
-              isDirectory: false,
-              isFile: true,
-              file: (callback: (filea: File) => void): void => {
-                callback(file)
-              }
-            }
-            const toUpload: UploadFile = new UploadFile(fakeFileEntry.name, fakeFileEntry);
-            this.addToQueue(toUpload);
-          }
-        } else {
-          if (entry.isFile) {
-            const toUpload: UploadFile = new UploadFile(entry.name, entry);
-            this.addToQueue(toUpload);
-          } else if (entry.isDirectory) {
-            this.traverseFileTree(entry, entry.name);
-          }
-        }
+  public uploadFiles(event: Event): void {
+    if (!this.isDropzoneDisabled()) {
+      if (event.target) {
+        const items = (event.target as HTMLInputElement).files || ([] as any);
+        this.checkFiles(items);
       }
+    }
+  }
 
-      this.preventAndStop(event);
+  private checkFiles(items: FileList | DataTransferItemList): void {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      let entry: FileSystemEntry | null = null;
+      if (this.canGetAsEntry(item)) {
+        entry = item.webkitGetAsEntry();
+      }
 
-      const timerObservable = timer(200, 200);
-      this.subscription = timerObservable.subscribe(t => {
-        if (this.files.length > 0 && this.numOfActiveReadEntries === 0) {
-          this.onFileDrop.emit(new UploadEvent(this.files));
-          this.files = [];
+      if (!entry) {
+        if (item) {
+          const fakeFileEntry: FileSystemFileEntry = {
+            name: (item as File).name,
+            isDirectory: false,
+            isFile: true,
+            file: (callback: (filea: File) => void): void => {
+              callback(item as File)
+            }
+          };
+          const toUpload: UploadFile = new UploadFile(fakeFileEntry.name, fakeFileEntry);
+          this.addToQueue(toUpload);
         }
-      });
+      } else {
+        if (entry.isFile) {
+          const toUpload: UploadFile = new UploadFile(entry.name, entry);
+          this.addToQueue(toUpload);
+        } else if (entry.isDirectory) {
+          this.traverseFileTree(entry, entry.name);
+        }
+      }
     }
 
+    const timerObservable = timer(200, 200);
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    this.subscription = timerObservable.subscribe(t => {
+      if (this.files.length > 0 && this.numOfActiveReadEntries === 0) {
+        this.onFileDrop.emit(new UploadEvent(this.files));
+        this.files = [];
+      }
+    });
   }
 
-  private traverseFileTree(item: FileSystemEntry, path: string) {
-
+  private traverseFileTree(item: FileSystemEntry, path: string): void {
     if (item.isFile) {
       const toUpload: UploadFile = new UploadFile(path, item);
       this.files.push(toUpload);
       this.zone.run(() => {
-        this.popToStack();
+        this.popFromStack();
       });
     } else {
       this.pushToStack(path);
       path = path + '/';
       const dirReader = (item as FileSystemDirectoryEntry).createReader();
-      let entries = [];
+      let entries: FileSystemEntry[] = [];
       const thisObj = this;
 
       const readEntries = function () {
-        thisObj.numOfActiveReadEntries++
+        thisObj.numOfActiveReadEntries++;
         dirReader.readEntries(function (res) {
           if (!res.length) {
             // add empty folders
@@ -179,7 +193,7 @@ export class FileComponent implements OnDestroy {
               }
             }
             thisObj.zone.run(() => {
-              thisObj.popToStack();
+              thisObj.popFromStack();
             });
           } else {
             // continue with the reading
@@ -194,30 +208,39 @@ export class FileComponent implements OnDestroy {
     }
   }
 
-  private addToQueue(item: UploadFile) {
+  private canGetAsEntry(item: any): item is DataTransferItem {
+    return !!item.webkitGetAsEntry;
+  }
+
+  private isDropzoneDisabled(): boolean {
+    return (this.globalDisable || this.disableIf);
+  }
+
+  private addToQueue(item: UploadFile): void {
     this.files.push(item);
   }
 
-  pushToStack(str) {
+  pushToStack(str: string): void {
     this.stack.push(str);
   }
 
-  popToStack() {
-    const value = this.stack.pop();
+  popFromStack(): string | undefined {
+    return this.stack.pop();
   }
 
-  private clearQueue() {
+  private clearQueue(): void {
     this.files = [];
   }
 
-  private preventAndStop(event) {
+  private preventAndStop(event: Event): void {
     event.stopPropagation();
     event.preventDefault();
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.subscription) {
       this.subscription.unsubscribe();
+      this.subscription = null;
     }
     this.globalStart();
     this.globalEnd();

tsconfig.json

@@ -7,6 +7,8 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "strictNullChecks": true,
+    "noImplicitAny": true,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"