@umbraco-ui/uui-file-dropzone 1.2.1 → 1.3.0-rc.1

package/custom-elements.json

@@ -7,9 +7,8 @@
       "attributes": [
         {
           "name": "accept",
-          "description": "Accepted filetypes. Will allow all types if empty.",
-          "type": "string",
-          "default": "\"false\""
+          "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": "multiple",
@@ -32,9 +31,8 @@
         {
           "name": "accept",
           "attribute": "accept",
-          "description": "Accepted filetypes. Will allow all types if empty.",
-          "type": "string",
-          "default": "\"false\""
+          "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": "multiple",
@@ -52,7 +50,7 @@
       ],
       "events": [
         {
-          "name": "file-change",
+          "name": "change",
           "description": "fires when the a file has been selected."
         }
       ],

package/lib/{UUIFileDropzoneEvents.d.ts → UUIFileDropzoneEvent.d.ts}

@@ -3,5 +3,6 @@ import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
 export declare class UUIFileDropzoneEvent extends UUIEvent<{
     files: File[];
 }, UUIFileDropzoneElement> {
-    static readonly FILE_CHANGE: string;
+    static readonly CHANGE: string;
+    constructor(evName: string, eventInit?: any | null);
 }

package/lib/index.d.ts

@@ -1 +1,2 @@
 export * from './uui-file-dropzone.element';
+export * from './UUIFileDropzoneEvent';

package/lib/index.js

@@ -5,9 +5,28 @@ 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';
 
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 class UUIFileDropzoneEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+  }
 }
-UUIFileDropzoneEvent.FILE_CHANGE = "file-change";
+UUIFileDropzoneEvent.CHANGE = "change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,13 +42,37 @@ var __decorateClass = (decorators, target, key, kind) => {
 let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   constructor() {
     super();
-    this.accept = "";
+    this._acceptedFileExtensions = [];
+    this._acceptedMimeTypes = [];
     this.multiple = false;
     this.addEventListener("dragenter", this._onDragEnter, false);
     this.addEventListener("dragleave", this._onDragLeave, false);
     this.addEventListener("dragover", this._onDragOver, false);
     this.addEventListener("drop", this._onDrop, false);
   }
+  set accept(value) {
+    if (value) {
+      const mimetypes = [];
+      const fileextensions = [];
+      value.split(",").forEach((item) => {
+        item = item.trim().toLowerCase();
+        if (new RegExp("[a-z]+\\/[a-z*]", "s").test(item)) {
+          mimetypes.push(item);
+        } else {
+          fileextensions.push(item.replace(/^\./, ""));
+        }
+      });
+      this._acceptedMimeTypes = mimetypes;
+      this._acceptedFileExtensions = fileextensions;
+    } else {
+      this._acceptedMimeTypes = [];
+      this._acceptedFileExtensions = [];
+    }
+  }
+  /**
+   * Opens the native file picker to select a file.
+   * @method browse
+   */
   browse() {
     this._input.click();
   }
@@ -37,55 +80,31 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     super.connectedCallback();
     demandCustomElement(this, "uui-symbol-file-dropzone");
   }
-  _checkIsItDirectory(dtItem) {
-    return !dtItem.type ? dtItem.webkitGetAsEntry().isDirectory : false;
-  }
   async _getAllFileEntries(dataTransferItemList) {
     const fileEntries = [];
-    const queue = [];
-    for (let i = 0; i < dataTransferItemList.length; i++) {
-      queue.push(dataTransferItemList[i].webkitGetAsEntry());
-    }
-    if (this.accept) {
-      const acceptList = [];
-      const wildcards = [];
-      this.accept.split(",").forEach((item) => {
-        if (item.includes("*")) {
-          wildcards.push(item.split("*")[0].trim().toLowerCase());
-        } else {
-          acceptList.push(item.trim().toLowerCase());
-        }
-      });
-      while (queue.length > 0) {
-        const entry = queue.shift();
-        if (entry.isFile && await this._isAccepted(acceptList, wildcards, entry)) {
-          fileEntries.push(entry);
-        } else if (entry.isDirectory) {
-          fileEntries.push(entry);
-          queue.push(
-            ...await this._readAllDirectoryEntries(
-              entry.createReader()
-            )
-          );
-        }
-      }
-    } else {
-      while (queue.length > 0) {
-        const entry = queue.shift();
-        if (entry.isFile) {
-          fileEntries.push(entry);
-        } else if (entry.isDirectory) {
-          fileEntries.push(entry);
-          queue.push(
-            ...await this._readAllDirectoryEntries(
-              entry.createReader()
-            )
-          );
+    const queue = [...dataTransferItemList];
+    while (queue.length > 0) {
+      const entry = queue.shift();
+      if (entry.kind === "file") {
+        const file = entry.getAsFile();
+        if (!file)
+          continue;
+        if (this._isAccepted(file)) {
+          fileEntries.push(file);
         }
+      } 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);
@@ -104,23 +123,21 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
       console.log(err);
     }
   }
-  async _getFile(fileEntry) {
-    return await new Promise(
-      (resolve, reject) => fileEntry.file(resolve, reject)
-    );
-  }
-  async _isAccepted(acceptList, wildcards, entry) {
-    const file = await this._getFile(entry);
-    const fileType = file.type.toLowerCase();
-    const fileExtension = "." + file.name.split(".")[1].toLowerCase();
-    if (acceptList.includes(fileExtension)) {
+  _isAccepted(file) {
+    if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {
       return true;
     }
-    if (acceptList.includes(fileType)) {
+    const fileType = file.type.toLowerCase();
+    const fileExtension = file.name.split(".").pop();
+    if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) {
       return true;
     }
-    if (wildcards.some((wildcard) => fileType.startsWith(wildcard))) {
-      return true;
+    for (const mimeType in this._acceptedMimeTypes) {
+      if (fileType === mimeType) {
+        return true;
+      } else if (mimeType.endsWith("/*") && fileType.startsWith(mimeType.replace("/*", ""))) {
+        return true;
+      }
     }
     return false;
   }
@@ -131,11 +148,11 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
     const items = (_a = e.dataTransfer) == null ? void 0 : _a.items;
     if (items) {
       let result = await this._getAllFileEntries(items);
-      if (this.multiple === false && result.length > 0) {
+      if (this.multiple === false && result.length) {
         result = [result[0]];
       }
       this.dispatchEvent(
-        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+        new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
           detail: { files: result }
         })
       );
@@ -155,7 +172,7 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
   _onFileInputChange() {
     const files = this._input.files ? Array.from(this._input.files) : [];
     this.dispatchEvent(
-      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+      new UUIFileDropzoneEvent(UUIFileDropzoneEvent.CHANGE, {
         detail: { files }
       })
     );
@@ -173,6 +190,7 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
           ?multiple=${this.multiple}
           @change=${this._onFileInputChange}
           aria-label="${this.label}" />
+        <slot></slot>
       </div>
     `;
   }
@@ -226,7 +244,7 @@ __decorateClass([
 ], UUIFileDropzoneElement.prototype, "_dropzone", 2);
 __decorateClass([
   property({ type: String })
-], UUIFileDropzoneElement.prototype, "accept", 2);
+], UUIFileDropzoneElement.prototype, "accept", 1);
 __decorateClass([
   property({ type: Boolean })
 ], UUIFileDropzoneElement.prototype, "multiple", 2);
@@ -234,4 +252,4 @@ UUIFileDropzoneElement = __decorateClass([
   defineElement("uui-file-dropzone")
 ], UUIFileDropzoneElement);
 
-export { UUIFileDropzoneElement };
+export { UUIFileDropzoneElement, UUIFileDropzoneEvent };

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

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 declare const UUIFileDropzoneElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
  * @element uui-file-dropzone
- *  @fires {UUIFileDropzoneEvent} file-change - fires when the a file has been selected.
+ *  @fires {UUIFileDropzoneEvent} change - fires when the a file has been selected.
  *  @slot - For the content of the dropzone
  *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
  */
@@ -10,13 +10,20 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     static styles: import("lit").CSSResult[];
     private _input;
     private _dropzone;
+    private _acceptedFileExtensions;
+    private _acceptedMimeTypes;
     /**
-     * Accepted filetypes. Will allow all types if empty.
+     * Comma-separated list of accepted mime types or file extensions (denoted with a `.`).
+     * If this is left empty, it will allow all types.
+     *
      * @type {string}
      * @attr
-     * @default false
+     * @examples [
+     *   "image/*,application/pdf",
+     *   ".gif,.png,.jpg,.jpeg,.pdf",
+     * ]
      */
-    accept: string;
+    set accept(value: string);
     /**
      * Allows for multiple files to be selected.
      * @type {boolean}
@@ -31,11 +38,9 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     browse(): void;
     constructor();
     connectedCallback(): void;
-    protected _checkIsItDirectory(dtItem: DataTransferItem): boolean;
     private _getAllFileEntries;
     private _readAllDirectoryEntries;
     private _readEntriesPromise;
-    private _getFile;
     private _isAccepted;
     private _onDrop;
     private _onDragOver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-file-dropzone",
-  "version": "1.2.1",
+  "version": "1.3.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,17 +30,17 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.1",
-    "@umbraco-ui/uui-symbol-file-dropzone": "1.2.1"
+    "@umbraco-ui/uui-base": "1.3.0-rc.1",
+    "@umbraco-ui/uui-symbol-file-dropzone": "1.3.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-file-dropzone",
-  "gitHead": "94eb22bee5ff21bac6fadbd78653671279bebe36"
+  "gitHead": "0c517175884931aa0bc0d8f05974852a7704626e"
 }