bug: Dropzone thinks custom file extensions are folders (#913)

* Bugfix: Dropzone thinks custom file extensions are folders * testing timeout and skip items.add
umbraco · Sep 25, 2024 · f4c7956 · f4c7956
1 parent 75faea2
commit f4c7956
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 68 deletions.
diff --git a/packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts b/packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts
@@ -116,7 +116,10 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
     for (const entry of queue) {
       if (entry?.kind !== 'file') continue;
 
-      if (entry.type) {
+      const fileEntry = this._getEntry(entry);
+      if (!fileEntry) continue;
+
+      if (!fileEntry.isDirectory) {
         // Entry is a file
         const file = entry.getAsFile();
         if (!file) continue;
@@ -125,12 +128,8 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
         }
       } else if (!this.disallowFolderUpload && this.multiple) {
         // Entry is a directory
-        const dir = this._getEntry(entry);
-
-        if (dir) {
-          const structure = await this._mkdir(dir);
-          folders.push(structure);
-        }
+        const structure = await this._mkdir(fileEntry);
+        folders.push(structure);
       }
     }
 

diff --git a/packages/uui-file-dropzone/lib/uui-file-dropzone.test.ts b/packages/uui-file-dropzone/lib/uui-file-dropzone.test.ts
@@ -1,4 +1,4 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { html, fixture, expect, oneEvent } from '@open-wc/testing';
 import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
 import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
 
@@ -39,59 +39,84 @@ describe('UUIFileDropzoneElement', () => {
     await expect(element).shadowDom.to.be.accessible();
   });
 
-  describe('drop files', () => {
-    it('supports dropping a single file', done => {
-      const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+  describe('drop files', async () => {
+    it('supports dropping a single file', () => {
       const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file1);
-      dataTransfer.items.add(file2);
-
-      expectFileChangeEvent(element, 1, 0, done);
-
-      element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+      // Skip if browser does not support DataTransfer.items
+      if ('items' in dataTransfer) {
+        const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dataTransfer.items.add(file1);
+        dataTransfer.items.add(file2);
+
+        const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
+        element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+
+        listener.then(event => {
+          const { files } = event.detail;
+          expect(files.length).to.equal(1);
+        });
+      }
     });
 
-    it('can drop multiple files', done => {
-      const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+    it('can drop multiple files', () => {
       const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file1);
-      dataTransfer.items.add(file2);
-
-      element.multiple = true;
-
-      expectFileChangeEvent(element, 2, 0, done);
-
-      element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+      if ('items' in dataTransfer) {
+        const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dataTransfer.items.add(file1);
+        dataTransfer.items.add(file2);
+
+        element.multiple = true;
+
+        const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
+        element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+
+        listener.then(event => {
+          const { files } = event.detail;
+          expect(files.length).to.equal(1);
+        });
+      }
     });
 
-    it('can set the accept attribute with a mimetype', done => {
-      const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+    it('can set the accept attribute with a mimetype', () => {
       const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file1);
-      dataTransfer.items.add(file2);
-
-      element.accept = 'image/*';
-
-      expectFileChangeEvent(element, 1, 0, done);
-
-      element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+      if ('items' in dataTransfer) {
+        const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dataTransfer.items.add(file1);
+        dataTransfer.items.add(file2);
+
+        element.accept = 'image/*';
+
+        const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
+        element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+
+        listener.then(event => {
+          const { files } = event.detail;
+          expect(files.length).to.equal(1);
+        });
+      }
     });
 
-    it('can set the accept attribute with a file extension', done => {
-      const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+    it('can set the accept attribute with a file extension', () => {
       const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file1);
-      dataTransfer.items.add(file2);
-
-      element.accept = '.jpg';
-
-      expectFileChangeEvent(element, 1, 0, done);
-
-      element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+      if ('items' in dataTransfer) {
+        const file1 = new File([''], 'file1.jpg', { type: 'image/jpeg' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dataTransfer.items.add(file1);
+        dataTransfer.items.add(file2);
+
+        element.accept = '.jpg';
+
+        const listener = oneEvent(element, UUIFileDropzoneEvent.CHANGE, false);
+        element.dispatchEvent(new DragEvent('drop', { dataTransfer }));
+
+        listener.then(event => {
+          const { files } = event.detail;
+          expect(files.length).to.equal(1);
+        });
+      }
     });
   });
 
@@ -103,31 +128,39 @@ describe('UUIFileDropzoneElement', () => {
     });
 
     it('supports selecting a single file', done => {
-      const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
       const dt = new DataTransfer();
-      dt.items.add(file1);
-      dt.items.add(file2);
-
-      expectFileChangeEvent(element, 1, 0, done);
-
-      innerElement.files = dt.files;
-      innerElement.dispatchEvent(new Event('change'));
+      if ('items' in dt) {
+        const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dt.items.add(file1);
+        dt.items.add(file2);
+
+        expectFileChangeEvent(element, 1, 0, done);
+
+        innerElement.files = dt.files;
+        innerElement.dispatchEvent(new Event('change'));
+      } else {
+        done();
+      }
     });
 
     it('can select multiple files', done => {
-      const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
-      const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
       const dt = new DataTransfer();
-      dt.items.add(file1);
-      dt.items.add(file2);
+      if ('items' in dt) {
+        const file1 = new File([''], 'file1.txt', { type: 'text/plain' });
+        const file2 = new File([''], 'file2.txt', { type: 'text/plain' });
+        dt.items.add(file1);
+        dt.items.add(file2);
 
-      element.multiple = true;
+        element.multiple = true;
 
-      expectFileChangeEvent(element, 2, 0, done);
+        expectFileChangeEvent(element, 2, 0, done);
 
-      innerElement.files = dt.files;
-      innerElement.dispatchEvent(new Event('change'));
+        innerElement.files = dt.files;
+        innerElement.dispatchEvent(new Event('change'));
+      } else {
+        done();
+      }
     });
   });
 });