@umbraco-ui/uui-file-dropzone 1.8.0 → 1.9.0-rc.1

package/custom-elements.json

@@ -10,6 +10,11 @@
           "description": "Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\nIf this is left empty, it will allow all types.",
           "type": "string"
         },
+        {
+          "name": "disallow-folder-upload",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "multiple",
           "description": "Allows for multiple files to be selected.",
@@ -29,6 +34,12 @@
           "description": "Comma-separated list of accepted mime types or file extensions (denoted with a `.`).\nIf this is left empty, it will allow all types.",
           "type": "string"
         },
+        {
+          "name": "disallowFolderUpload",
+          "attribute": "disallow-folder-upload",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "multiple",
           "attribute": "multiple",

package/lib/UUIFileDropzoneEvent.d.ts

@@ -1,7 +1,8 @@
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
-import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
+import { UUIFileDropzoneElement, UUIFileFolder } from './uui-file-dropzone.element';
 export declare class UUIFileDropzoneEvent extends UUIEvent<{
     files: File[];
+    folders: UUIFileFolder[];
 }, UUIFileDropzoneElement> {
     static readonly CHANGE: string;
     constructor(evName: string, eventInit?: any | null);

package/lib/index.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
-import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import '@umbraco-ui/uui-symbol-file-dropzone/lib';
 
 class UUIFileDropzoneEvent extends UUIEvent {
   constructor(evName, eventInit = {}) {
@@ -22,8 +22,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
@@ -32,6 +31,7 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     this._acceptedFileExtensions = [];
     this._acceptedMimeTypes = [];
     this._accept = "";
+    this.disallowFolderUpload = false;
     this.multiple = false;
     this.addEventListener("dragenter", this._onDragEnter, false);
     this.addEventListener("dragleave", this._onDragLeave, false);
@@ -70,53 +70,74 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   browse() {
     this._input.click();
   }
-  connectedCallback() {
-    super.connectedCallback();
-    demandCustomElement(this, "uui-symbol-file-dropzone");
-  }
-  async _getAllFileEntries(dataTransferItemList) {
-    const fileEntries = [];
+  async _getAllEntries(dataTransferItemList) {
     const queue = [...dataTransferItemList];
-    while (queue.length > 0) {
-      const entry = queue.shift();
-      if (entry.kind === "file") {
+    const folders = [];
+    const files = [];
+    for (const entry of queue) {
+      if (entry?.kind !== "file") continue;
+      if (entry.type) {
         const file = entry.getAsFile();
-        if (!file)
-          continue;
+        if (!file) continue;
         if (this._isAccepted(file)) {
-          fileEntries.push(file);
+          files.push(file);
+        }
+      } else if (!this.disallowFolderUpload) {
+        const dir = this._getEntry(entry);
+        if (dir) {
+          const structure = await this._mkdir(dir);
+          folders.push(structure);
         }
-      } else if (entry.kind === "directory") {
-        if ("webkitGetAsEntry" in entry === false)
-          continue;
-        const directory = entry.webkitGetAsEntry();
-        queue.push(
-          ...await this._readAllDirectoryEntries(directory.createReader())
-        );
       }
     }
-    return fileEntries;
-  }
-  // Get all the entries (files or sub-directories) in a directory
-  // by calling readEntries until it returns empty array
-  async _readAllDirectoryEntries(directoryReader) {
-    const entries = [];
-    let readEntries = await this._readEntriesPromise(directoryReader);
-    while (readEntries.length > 0) {
-      entries.push(...readEntries);
-      readEntries = await this._readEntriesPromise(directoryReader);
+    return { files, folders };
+  }
+  /**
+   * Get the directory entry from a DataTransferItem.
+   * @remark Supports both WebKit and non-WebKit browsers.
+   */
+  _getEntry(entry) {
+    let dir = null;
+    if ("webkitGetAsEntry" in entry) {
+      dir = entry.webkitGetAsEntry();
+    } else if ("getAsEntry" in entry) {
+      dir = entry.getAsEntry();
     }
-    return entries;
-  }
-  async _readEntriesPromise(directoryReader) {
-    return new Promise((resolve, reject) => {
-      try {
-        directoryReader.readEntries(resolve, reject);
-      } catch (err) {
-        console.log(err);
-        reject(err);
-      }
-    });
+    return dir;
+  }
+  // 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);
+            }
+          }
+          readEntries(reader2);
+          resolve();
+        }, reject);
+      });
+    };
+    await readEntries(reader);
+    const result = { folderName: entry.name, folders, files };
+    return result;
   }
   _isAccepted(file) {
     if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {
@@ -136,18 +157,22 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     }
     return false;
   }
+  async _getAsFile(fileEntry) {
+    return new Promise((resolve, reject) => fileEntry.file(resolve, reject));
+  }
   async _onDrop(e) {
     e.preventDefault();
     this._dropzone.classList.remove("hover");
     const items = e.dataTransfer?.items;
     if (items) {
-      let result = await this._getAllFileEntries(items);
-      if (this.multiple === false && result.length) {
-        result = [result[0]];
+      const fileSystemResult = await this._getAllEntries(items);
+      if (this.multiple === false && fileSystemResult.files.length) {
+        fileSystemResult.files = [fileSystemResult.files[0]];
       }
+      this._getAllEntries(items);
       this.dispatchEvent(
         new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
-          detail: { files: result }
+          detail: fileSystemResult
         })
       );
     }
@@ -239,6 +264,13 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIFileDropzoneElement.prototype, "accept", 1);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "disallow-folder-upload"
+  })
+], UUIFileDropzoneElement.prototype, "disallowFolderUpload", 2);
 __decorateClass([
   property({ type: Boolean })
 ], UUIFileDropzoneElement.prototype, "multiple", 2);

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

@@ -1,4 +1,10 @@
 import { LitElement } from 'lit';
+import '@umbraco-ui/uui-symbol-file-dropzone/lib';
+export interface UUIFileFolder {
+    folderName: string;
+    folders: UUIFileFolder[];
+    files: File[];
+}
 declare const UUIFileDropzoneElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
  * @element uui-file-dropzone
@@ -25,6 +31,7 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
      */
     set accept(value: string);
     get accept(): string;
+    disallowFolderUpload: boolean;
     /**
      * Allows for multiple files to be selected.
      * @type {boolean}
@@ -38,11 +45,15 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
      */
     browse(): void;
     constructor();
-    connectedCallback(): void;
-    private _getAllFileEntries;
-    private _readAllDirectoryEntries;
-    private _readEntriesPromise;
+    private _getAllEntries;
+    /**
+     * Get the directory entry from a DataTransferItem.
+     * @remark Supports both WebKit and non-WebKit browsers.
+     */
+    private _getEntry;
+    private _mkdir;
     private _isAccepted;
+    private _getAsFile;
     private _onDrop;
     private _onDragOver;
     private _onDragEnter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-file-dropzone",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.8.0",
-    "@umbraco-ui/uui-symbol-file-dropzone": "1.8.0"
+    "@umbraco-ui/uui-base": "1.9.0-rc.1",
+    "@umbraco-ui/uui-symbol-file-dropzone": "1.9.0-rc.1"
   },
   "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": "53021762a52dc54a46f0c5ef829c1cbaabde1160"
+  "gitHead": "7092b4717d8b9d4825b15e087508b8f75bf81a92"
 }