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

package/custom-elements.json

@@ -7,9 +7,8 @@
       "attributes": [
         {
           "name": "accept",
-          "description": "Comma-separated list of 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": "Comma-separated list of 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",

package/lib/index.js

@@ -42,13 +42,33 @@ 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
@@ -60,30 +80,16 @@ 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 = [...dataTransferItemList];
-    const acceptList = [];
-    const wildcards = [];
-    if (this.accept) {
-      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.kind === "file") {
         const file = entry.getAsFile();
         if (!file)
           continue;
-        if (this._isAccepted(acceptList, wildcards, file)) {
+        if (this._isAccepted(file)) {
           fileEntries.push(file);
         }
       } else if (entry.kind === "directory") {
@@ -117,20 +123,21 @@ let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
       console.log(err);
     }
   }
-  _isAccepted(acceptList, wildcards, file) {
-    if (acceptList.length === 0 && wildcards.length === 0) {
+  _isAccepted(file) {
+    if (this._acceptedFileExtensions.length === 0 && this._acceptedMimeTypes.length === 0) {
       return true;
     }
     const fileType = file.type.toLowerCase();
-    const fileExtension = "." + file.name.split(".")[1].toLowerCase();
-    if (acceptList.includes(fileExtension)) {
+    const fileExtension = file.name.split(".").pop();
+    if (fileExtension && this._acceptedFileExtensions.includes(fileExtension.toLowerCase())) {
       return true;
     }
-    if (acceptList.includes(fileType)) {
-      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;
   }
@@ -205,18 +212,18 @@ UUIFileDropzoneElement.styles = [
         backdrop-filter: blur(2px);
       }
       #dropzone.hover {
-        border-color: var(--uui-color-default,var(--uui-palette-space-cadet));
+        border-color: var(--uui-color-default,#1b264f);
       }
       #dropzone.hover::before {
         content: '';
         position: absolute;
         inset: 0;
         opacity: 0.2;
-        border-color: var(--uui-color-default,var(--uui-palette-space-cadet));
-        background-color: var(--uui-color-default,var(--uui-palette-space-cadet));
+        border-color: var(--uui-color-default,#1b264f);
+        background-color: var(--uui-color-default,#1b264f);
       }
       #symbol {
-        color: var(--uui-color-default,var(--uui-palette-space-cadet));
+        color: var(--uui-color-default,#1b264f);
         max-width: 100%;
         max-height: 100%;
       }
@@ -237,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);

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

@@ -10,17 +10,20 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     static styles: import("lit").CSSResult[];
     private _input;
     private _dropzone;
+    private _acceptedFileExtensions;
+    private _acceptedMimeTypes;
     /**
-     * Comma-separated list of 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/png,image/jpeg,image/gif",
-     *   "gif,png,jpg,jpeg",
+     *   "image/*,application/pdf",
+     *   ".gif,.png,.jpg,.jpeg,.pdf",
      * ]
      */
-    accept: string;
+    set accept(value: string);
     /**
      * Allows for multiple files to be selected.
      * @type {boolean}
@@ -35,7 +38,6 @@ export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base
     browse(): void;
     constructor();
     connectedCallback(): void;
-    protected _checkIsItDirectory(dtItem: DataTransferItem): boolean;
     private _getAllFileEntries;
     private _readAllDirectoryEntries;
     private _readEntriesPromise;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-file-dropzone",
-  "version": "1.3.0-rc.0",
+  "version": "1.3.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,17 +30,17 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.3.0-rc.0",
-    "@umbraco-ui/uui-symbol-file-dropzone": "1.3.0-rc.0"
+    "@umbraco-ui/uui-base": "1.3.0",
+    "@umbraco-ui/uui-symbol-file-dropzone": "1.3.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf -g 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": "45c3824056586d9817efb3f61dc0bef5478747f0"
+  "gitHead": "e662ac3be21cef08076d1dbb978748c2dd30e596"
 }