@umbraco-ui/uui-file-dropzone 1.17.0-rc.4 → 1.17.0

package/custom-elements.json

@@ -62,7 +62,11 @@
       "events": [
         {
           "name": "change",
-          "description": "fires when the a file has been selected."
+          "description": "fires when a file has been selected."
+        },
+        {
+          "name": "reject",
+          "description": "fires when files are rejected due to not matching the accept attribute."
         }
       ],
       "slots": [

package/lib/UUIFileDropzoneEvent.d.ts

@@ -5,5 +5,6 @@ export declare class UUIFileDropzoneEvent extends UUIEvent<{
     folders: UUIFileFolder[];
 }, UUIFileDropzoneElement> {
     static readonly CHANGE: string;
+    static readonly REJECT: string;
     constructor(evName: string, eventInit?: any | null);
 }

package/lib/index.js

@@ -9,6 +9,9 @@ class UUIFileDropzoneEvent extends UUIEvent {
   static {
     this.CHANGE = "change";
   }
+  static {
+    this.REJECT = "reject";
+  }
   constructor(evName, eventInit = {}) {
     super(evName, {
       ...{ bubbles: true },
@@ -72,26 +75,45 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   browse() {
     this._input.click();
   }
+  /**
+   * Process a single file entry and categorize it as accepted or rejected.
+   * @param entry - The data transfer item containing the file
+   * @param files - Array to store accepted files
+   * @param rejectedFiles - Array to store rejected files
+   */
+  _processFileEntry(entry, files, rejectedFiles) {
+    const file = entry.getAsFile();
+    if (!file) return;
+    if (this._isAccepted(file)) {
+      files.push(file);
+    } else {
+      rejectedFiles.push(file);
+    }
+  }
+  /**
+   * Check if folder upload should be processed based on component settings.
+   * @returns true if folder upload is allowed and multiple files are enabled
+   */
+  _shouldProcessFolder() {
+    return !this.disallowFolderUpload && this.multiple;
+  }
   async _getAllEntries(dataTransferItemList) {
     const queue = [...dataTransferItemList];
     const folders = [];
     const files = [];
+    const rejectedFiles = [];
     for (const entry of queue) {
       if (entry?.kind !== "file") continue;
       const fileEntry = this._getEntry(entry);
       if (!fileEntry) continue;
       if (!fileEntry.isDirectory) {
-        const file = entry.getAsFile();
-        if (!file) continue;
-        if (this._isAccepted(file)) {
-          files.push(file);
-        }
-      } else if (!this.disallowFolderUpload && this.multiple) {
+        this._processFileEntry(entry, files, rejectedFiles);
+      } else if (this._shouldProcessFolder()) {
         const structure = await this._mkdir(fileEntry);
         folders.push(structure);
       }
     }
-    return { files, folders };
+    return { files, folders, rejectedFiles };
   }
   /**
    * Get the directory entry from a DataTransferItem.
@@ -106,37 +128,40 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     }
     return dir;
   }
+  // Process entries from a directory reader
+  async _processEntries(entries, folders, files) {
+    for (const en of entries) {
+      if (en.isFile) {
+        const file = await this._getAsFile(en);
+        if (this._isAccepted(file)) {
+          files.push(file);
+        }
+      } else if (en.isDirectory) {
+        const directory = await this._mkdir(en);
+        folders.push(directory);
+      }
+    }
+  }
+  // Read entries from a directory reader recursively
+  async _readAllEntries(reader, folders, files) {
+    return new Promise((resolve, reject) => {
+      reader.readEntries(async (entries) => {
+        if (!entries.length) {
+          resolve();
+          return;
+        }
+        await this._processEntries(entries, folders, files);
+        await this._readAllEntries(reader, folders, files);
+        resolve();
+      }, reject);
+    });
+  }
   // Make directory structure
   async _mkdir(entry) {
     const reader = entry.createReader();
     const folders = [];
     const files = [];
-    const readEntries = (reader2) => {
-      return new Promise((resolve, reject) => {
-        reader2.readEntries(async (entries) => {
-          if (!entries.length) {
-            resolve();
-            return;
-          }
-          for (const en of entries) {
-            if (en.isFile) {
-              const file = await this._getAsFile(en);
-              if (this._isAccepted(file)) {
-                files.push(file);
-              }
-            } else if (en.isDirectory) {
-              const directory = await this._mkdir(
-                en
-              );
-              folders.push(directory);
-            }
-          }
-          await readEntries(reader2);
-          resolve();
-        }, reject);
-      });
-    };
-    await readEntries(reader);
+    await this._readAllEntries(reader, folders, files);
     const result = { folderName: entry.name, folders, files };
     return result;
   }
@@ -170,13 +195,24 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
       if (this.multiple === false && fileSystemResult.files.length) {
         fileSystemResult.files = [fileSystemResult.files[0]];
         fileSystemResult.folders = [];
+        fileSystemResult.rejectedFiles = [];
+      }
+      if (fileSystemResult.rejectedFiles.length > 0) {
+        this.dispatchEvent(
+          new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
+            detail: { files: fileSystemResult.rejectedFiles, folders: [] }
+          })
+        );
       }
       if (!fileSystemResult.files.length && !fileSystemResult.folders.length) {
         return;
       }
       this.dispatchEvent(
         new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-          detail: fileSystemResult
+          detail: {
+            files: fileSystemResult.files,
+            folders: fileSystemResult.folders
+          }
         })
       );
     }
@@ -198,12 +234,24 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
       files.splice(1, files.length - 1);
     }
     const allowedFiles = files.filter((file) => this._isAccepted(file));
+    const rejectedFiles = files.filter((file) => !this._isAccepted(file));
+    const shouldReportRejections = rejectedFiles.length > 0 && (this.multiple || allowedFiles.length === 0);
+    if (shouldReportRejections) {
+      this.dispatchEvent(
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.REJECT, {
+          detail: { files: rejectedFiles, folders: [] }
+        })
+      );
+    }
     if (!allowedFiles.length) {
       return;
     }
     this.dispatchEvent(
       new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-        detail: { files: allowedFiles, folders: [] }
+        detail: {
+          files: allowedFiles,
+          folders: []
+        }
       })
     );
   }

package/lib/uui-file-dropzone.element.d.ts

@@ -8,7 +8,8 @@ export interface UUIFileFolder {
 declare const UUIFileDropzoneElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
  * @element uui-file-dropzone
- *  @fires {UUIFileDropzoneEvent} change - fires when the a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} change - fires when a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} reject - fires when files are rejected due to not matching the accept attribute.
  *  @slot - For the content of the dropzone
  *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
  */
@@ -45,12 +46,26 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
      */
     browse(): void;
     constructor();
+    /**
+     * Process a single file entry and categorize it as accepted or rejected.
+     * @param entry - The data transfer item containing the file
+     * @param files - Array to store accepted files
+     * @param rejectedFiles - Array to store rejected files
+     */
+    private _processFileEntry;
+    /**
+     * Check if folder upload should be processed based on component settings.
+     * @returns true if folder upload is allowed and multiple files are enabled
+     */
+    private _shouldProcessFolder;
     private _getAllEntries;
     /**
      * Get the directory entry from a DataTransferItem.
      * @remark Supports both WebKit and non-WebKit browsers.
      */
     private _getEntry;
+    private _processEntries;
+    private _readAllEntries;
     private _mkdir;
     private _isAccepted;
     private _getAsFile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-file-dropzone",
-  "version": "1.17.0-rc.4",
+  "version": "1.17.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.17.0-rc.4",
-    "@umbraco-ui/uui-symbol-file-dropzone": "1.17.0-rc.4"
+    "@umbraco-ui/uui-base": "1.17.0",
+    "@umbraco-ui/uui-symbol-file-dropzone": "1.17.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-file-dropzone",
-  "gitHead": "a4a929fa86b765eff039d33969e4117f493aaa29"
+  "gitHead": "7d602fc76ed33f3100ead94a01e1d6f1eedf0f5e"
 }