diff --git a/src/uploadx/lib/uploadx-drop.directive.ts b/src/uploadx/lib/uploadx-drop.directive.ts index 2221c40..7ab9f6b 100644 --- a/src/uploadx/lib/uploadx-drop.directive.ts +++ b/src/uploadx/lib/uploadx-drop.directive.ts @@ -16,20 +16,19 @@ export class UploadxDropDirective { dropHandler(event: DragEvent): void { this._stopEvents(event); this.active = false; - if (event.dataTransfer?.files.length) { - this.fileInput - ? this.fileInput.fileListener(event.dataTransfer.files) - : this.uploadService.handleFiles(event.dataTransfer.files); + const files = this.getFiles(event); + if (files.length) { + this.fileInput ? this.fileInput.fileListener(files) : this.uploadService.handleFiles(files); } } @HostListener('dragover', ['$event']) onDragOver(event: DragEvent): void { this._stopEvents(event); - if (event.dataTransfer?.items.length) { + if (event.dataTransfer?.items[0]?.kind === 'file') { if (this.fileInput?.options.multiple === false && event.dataTransfer.items.length > 1) { event.dataTransfer.dropEffect = 'none'; - } else if (event.dataTransfer.items[0].kind === 'file') { + } else { event.dataTransfer.dropEffect = 'copy'; this.active = true; } @@ -42,6 +41,24 @@ export class UploadxDropDirective { this.active = false; } + /** + * Extracts the files from a `DragEvent` object + */ + getFiles(event: DragEvent): FileList | File[] { + const dataTransfer = new DataTransfer(); + const items = event.dataTransfer?.items; + if (items?.length) { + for (let i = 0; i < items.length; i++) { + const item = items[i]; + if (item.kind === 'file' && !item.webkitGetAsEntry()?.isDirectory) { + const file = item.getAsFile(); + file && dataTransfer.items.add(file); + } + } + } + return dataTransfer.files; + } + protected _stopEvents(event: DragEvent): void { event.stopPropagation(); event.preventDefault(); diff --git a/src/uploadx/lib/uploadx.directive.ts b/src/uploadx/lib/uploadx.directive.ts index b000e69..05385d6 100644 --- a/src/uploadx/lib/uploadx.directive.ts +++ b/src/uploadx/lib/uploadx.directive.ts @@ -42,8 +42,8 @@ export class UploadxDirective implements OnInit { } @HostListener('change', ['$event.target.files']) - fileListener(files: FileList): void { - if (files && files.item(0)) { + fileListener(files?: FileList | File[]): void { + if (files?.length) { this.uploadService.handleFiles(files, this.options); } }