fix: ignore dropped folders (#425)

Ignore dropped directories as a workaround for #422

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();

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);
     }
   }