diff --git a/src/directives/ng-file-drop.ts b/src/directives/ng-file-drop.ts index a15d0156..59251812 100644 --- a/src/directives/ng-file-drop.ts +++ b/src/directives/ng-file-drop.ts @@ -80,29 +80,14 @@ export class NgFileDropDirective implements OnChanges, OnInit { return; } - this.el.nativeElement.addEventListener('drop', (e: any) => { - e.stopPropagation(); - e.preventDefault(); - this.onFileOver.emit(false); - this.files = Array.from(e.dataTransfer.files); - if (this.files && this.files.length) { - this.uploader.addFilesToQueue(this.files); - } - }, false); - - this.el.nativeElement.addEventListener('dragenter', (e: DragEvent) => { - e.stopPropagation(); - e.preventDefault(); - }, false); - - this.el.nativeElement.addEventListener('dragover', (e: DragEvent) => { - e.stopPropagation(); - e.preventDefault(); - }, false); + this.el.nativeElement.addEventListener('drop', this.stopEvent, false); + this.el.nativeElement.addEventListener('dragenter', this.stopEvent, false); + this.el.nativeElement.addEventListener('dragover', this.stopEvent, false); } - @HostListener('change') onChange(): void { - this.files = this.el.nativeElement.files; + @HostListener('drop', ['$event']) onDrop(e: DragEvent): void { + this.onFileOver.emit(false); + this.files = Array.from(e.dataTransfer.files); if (!this.files || !this.files.length) { return; } @@ -136,6 +121,11 @@ export class NgFileDropDirective implements OnChanges, OnInit { }); } + if(this.options.maxUploads > 0 && this.files.length > this.options.maxUploads) { + this.onUploadRejected.emit({file: this.files.pop(), reason: UploadRejected.MAX_UPLOADS_EXCEEDED}); + this.files = []; + } + if (this.files && this.files.length) { this.uploader.addFilesToQueue(this.files); } @@ -153,4 +143,9 @@ export class NgFileDropDirective implements OnChanges, OnInit { this.onFileOver.emit(false); } + private stopEvent(e: DragEvent): void { + e.stopPropagation(); + e.preventDefault(); + } + }