bug(uui-file-dropzone): change event is dispatched too early with more than 100 files (#848)

* Bugfix: Dropzone dispatch event too early.

* multiple property with folder logic

* add disallow folder upload story

* docs: convert story to StoryObj to better map attributes

* fix: ensure file browse uses same logic as file drop

* test: add cases for mimetypes and simplify logic

* fix: make sure mimetypes are accepted by using the right for-of loop

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: loivsen

packages/uui-file-dropzone/lib/uui-file-dropzone.element.ts

@@ -123,7 +123,7 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
         if (this._isAccepted(file)) {
           files.push(file);
         }
-      } else if (!this.disallowFolderUpload) {
+      } else if (!this.disallowFolderUpload && this.multiple) {
         // Entry is a directory
         const dir = this._getEntry(entry);
 
@@ -133,6 +133,7 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
         }
       }
     }
+
     return { files, folders };
   }
 
@@ -184,7 +185,7 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
           }
 
           // readEntries only reads up to 100 entries at a time. It is on purpose we call readEntries recursively.
-          readEntries(reader);
+          await readEntries(reader);
 
           resolve();
         }, reject);
@@ -215,12 +216,12 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
       return true;
     }
 
-    for (const mimeType in this._acceptedMimeTypes) {
+    for (const mimeType of this._acceptedMimeTypes) {
       if (fileType === mimeType) {
         return true;
       } else if (
         mimeType.endsWith('/*') &&
-        fileType.startsWith(mimeType.replace('/*', ''))
+        fileType.startsWith(mimeType.replace('*', ''))
       ) {
         return true;
       }
@@ -244,9 +245,12 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
 
       if (this.multiple === false && fileSystemResult.files.length) {
         fileSystemResult.files = [fileSystemResult.files[0]];
+        fileSystemResult.folders = [];
       }
 
-      this._getAllEntries(items);
+      if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {
+        return;
+      }
 
       this.dispatchEvent(
         new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
@@ -274,9 +278,19 @@ export class UUIFileDropzoneElement extends LabelMixin('', LitElement) {
   private _onFileInputChange() {
     const files = this._input.files ? Array.from(this._input.files) : [];
 
+    if (this.multiple === false && files.length > 1) {
+      files.splice(1, files.length - 1);
+    }
+
+    const allowedFiles = files.filter(file => this._isAccepted(file));
+
+    if (!allowedFiles.length) {
+      return;
+    }
+
     this.dispatchEvent(
       new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-        detail: { files: files },
+        detail: { files: allowedFiles, folders: [] },
       }),
     );
   }

packages/uui-file-dropzone/lib/uui-file-dropzone.story.ts

@@ -1,7 +1,7 @@
-import { Meta, StoryFn } from '@storybook/web-components';
+import { Meta, StoryObj } from '@storybook/web-components';
 import { action } from '@storybook/addon-actions';
 import { html } from 'lit';
-import type { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
+import { UUIFileDropzoneEvent } from './UUIFileDropzoneEvent';
 import type { UUIFileDropzoneElement } from './uui-file-dropzone.element';
 
 import '@umbraco-ui/uui-button/lib';
@@ -10,7 +10,7 @@ import '@umbraco-ui/uui-symbol-file-dropzone/lib';
 import './uui-file-dropzone.element';
 import readme from '../README.md?raw';
 
-const meta: Meta<typeof UUIFileDropzoneElement> = {
+const meta: Meta<UUIFileDropzoneElement> = {
   id: 'uui-file-dropzone',
   title: 'Inputs/Files/File Dropzone',
   component: 'uui-file-dropzone',
@@ -31,83 +31,99 @@ const meta: Meta<typeof UUIFileDropzoneElement> = {
 
 export default meta;
 
-const handleFileChange = (e: UUIFileDropzoneEvent) => {
-  console.log('event.detail: ', e.detail);
-  action('change')(e);
-};
+type Story = StoryObj<UUIFileDropzoneElement>;
 
-const Template: StoryFn<UUIFileDropzoneElement> = props => {
-  return html`
-    <uui-file-dropzone
-      @change=${handleFileChange}
-      .accept=${props.accept}
-      ?multiple=${props.multiple}
-      label="Drop files here"></uui-file-dropzone>
-  `;
+const handleFileChange = (e: Event) => {
+  if (!(e instanceof UUIFileDropzoneEvent)) {
+    return;
+  }
+  console.log('event.detail: ', e.detail);
+  action('change')(e.detail);
 };
 
-export const AAAOverview = Template.bind({});
-AAAOverview.storyName = 'Overview';
+// Attach event listener to the story to log the event
+document.addEventListener('change', handleFileChange);
 
-export const Multiple = Template.bind({});
-Multiple.args = {
-  multiple: true,
+export const AAAOverview: Story = {
+  name: 'Overview',
 };
-Multiple.parameters = {
-  docs: {
-    description: {
-      story:
-        'When the multiple attribute is specified, the file input allows the user to select more than one file.',
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When the multiple attribute is specified, the file input allows the user to select more than one file.',
+      },
     },
   },
 };
 
-export const Accept = Template.bind({});
-Accept.args = {
-  accept: 'image/*',
-};
-Accept.parameters = {
-  docs: {
-    description: {
-      story:
-        'The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information.',
+export const Accept: Story = {
+  args: {
+    accept: 'image/*',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more information.',
+      },
     },
   },
 };
 
-export const BrowseFiles: StoryFn<UUIFileDropzoneElement> = props => {
-  const handleBrowse = () => {
-    const dropzone = document.getElementById(
-      'browse-dropzone',
-    ) as UUIFileDropzoneElement;
-    dropzone.browse();
-  };
-
-  return html`
-    <uui-file-dropzone
-      id="browse-dropzone"
-      .accept=${props.accept}
-      ?multiple=${props.multiple}
-      @change=${handleFileChange}
-      label="Drop files here">
-      Drop files here
-      <uui-button
-        style="margin-top: 9px;"
-        @click=${handleBrowse}
-        look="primary"
-        label="Browse"></uui-button>
-    </uui-file-dropzone>
-  `;
+export const DisallowFolderUpload: Story = {
+  args: {
+    disallowFolderUpload: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The disallow-folder-upload attribute prevents the user from uploading folders.',
+      },
+    },
+  },
 };
 
-BrowseFiles.parameters = {
-  docs: {
-    description: {
-      story:
-        'The browse method allows the user to select a file from their computer.',
-    },
-    source: {
-      code: `
+export const BrowseFiles: Story = {
+  render: props => {
+    const handleBrowse = () => {
+      const dropzone = document.getElementById(
+        'browse-dropzone',
+      ) as UUIFileDropzoneElement;
+      dropzone.browse();
+    };
+
+    return html`
+      <uui-file-dropzone
+        id="browse-dropzone"
+        .accept=${props.accept}
+        ?multiple=${props.multiple}
+        ?disallow-folder-upload=${props.disallowFolderUpload}
+        @change=${handleFileChange}
+        label="Drop files here">
+        Drop files here
+        <uui-button
+          style="margin-top: 9px;"
+          @click=${handleBrowse}
+          look="primary"
+          label="Browse"></uui-button>
+      </uui-file-dropzone>
+    `;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The browse method allows the user to select a file from their computer.',
+      },
+      source: {
+        code: `
 const handleBrowse = () => {
   const dropzone = document.getElementById('browse-dropzone');
   dropzone.browse();
@@ -117,6 +133,7 @@ const handleBrowse = () => {
   Drop files here
   <uui-button style="margin-top: 9px;" @click="handleBrowse" look="primary">Browse</uui-button>
 </uui-file-dropzone>`,
+      },
     },
   },
 };