@umbraco-ui/uui-file-dropzone 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-file-dropzone
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-file-dropzone?logoColor=%231B264F)
+
+Umbraco style file-dropzone component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-file-dropzone
+```
+
+Import the registration of `<uui-file-dropzone>` via:
+
+```javascript
+import '@umbraco-ui/uui-file-dropzone';
+```
+
+When looking to leverage the `UUIFileDropzoneElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIFileDropzoneElement } from '@umbraco-ui/uui-file-dropzone';
+```
+
+## Usage
+
+```html
+<uui-file-dropzone></uui-file-dropzone>
+```

package/custom-elements.json

@@ -0,0 +1,67 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-file-dropzone",
+      "path": "./lib/uui-file-dropzone.element.ts",
+      "attributes": [
+        {
+          "name": "accept",
+          "description": "Accepted filetypes. Will allow all types if empty.",
+          "type": "string",
+          "default": "\"false\""
+        },
+        {
+          "name": "multiple",
+          "description": "Allows for multiple files to be selected.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and eventually as visual label",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "accept",
+          "attribute": "accept",
+          "description": "Accepted filetypes. Will allow all types if empty.",
+          "type": "string",
+          "default": "\"false\""
+        },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Allows for multiple files to be selected.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and eventually as visual label",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "file-change",
+          "description": "fires when the a file has been selected."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "For the content of the dropzone"
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIFileDropzoneEvents.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIFileDropzoneElement } from './uui-file-dropzone.element';
+export declare class UUIFileDropzoneEvent extends UUIEvent<{
+    files: File[];
+}, UUIFileDropzoneElement> {
+    static readonly FILE_CHANGE: string;
+}

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,223 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+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';
+
+class UUIFileDropzoneEvent extends UUIEvent {
+}
+UUIFileDropzoneEvent.FILE_CHANGE = "file-change";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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);
+  return result;
+};
+let UUIFileDropzoneElement = class extends LabelMixin("", LitElement) {
+  constructor() {
+    super();
+    this.accept = "";
+    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);
+  }
+  browse() {
+    this._input.click();
+  }
+  connectedCallback() {
+    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()));
+        }
+      }
+    }
+    return fileEntries;
+  }
+  async _readAllDirectoryEntries(directoryReader) {
+    const entries = [];
+    let readEntries = await this._readEntriesPromise(directoryReader);
+    while (readEntries.length > 0) {
+      entries.push(...readEntries);
+      readEntries = await this._readEntriesPromise(directoryReader);
+    }
+    return entries;
+  }
+  async _readEntriesPromise(directoryReader) {
+    try {
+      return await new Promise((resolve, reject) => {
+        directoryReader.readEntries(resolve, reject);
+      });
+    } catch (err) {
+      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)) {
+      return true;
+    }
+    if (acceptList.includes(fileType)) {
+      return true;
+    }
+    if (wildcards.some((wildcard) => fileType.startsWith(wildcard))) {
+      return true;
+    }
+    return false;
+  }
+  async _onDrop(e) {
+    var _a;
+    e.preventDefault();
+    this._dropzone.classList.remove("hover");
+    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) {
+        result = [result[0]];
+      }
+      this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+        detail: { files: result }
+      }));
+    }
+  }
+  _onDragOver(e) {
+    e.preventDefault();
+  }
+  _onDragEnter(e) {
+    this._dropzone.classList.add("hover");
+    e.preventDefault();
+  }
+  _onDragLeave(e) {
+    this._dropzone.classList.remove("hover");
+    e.preventDefault();
+  }
+  _onFileInputChange() {
+    const files = this._input.files ? Array.from(this._input.files) : [];
+    this.dispatchEvent(new UUIFileDropzoneEvent(UUIFileDropzoneEvent.FILE_CHANGE, {
+      detail: { files }
+    }));
+  }
+  render() {
+    return html`
+      <div id="dropzone">
+        <uui-symbol-file-dropzone id="symbol"></uui-symbol-file-dropzone>
+        ${this.renderLabel()}
+        <input
+          @click=${(e) => e.stopImmediatePropagation()}
+          id="input"
+          type="file"
+          accept=${this.accept}
+          ?multiple=${this.multiple}
+          @change=${this._onFileInputChange}
+          aria-label="${this.label}" />
+      </div>
+    `;
+  }
+};
+UUIFileDropzoneElement.styles = [
+  css`
+      #dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: var(--uui-size-4,12px);
+        border: 3px solid transparent;
+        margin: -3px;
+        backdrop-filter: blur(2px);
+      }
+      #dropzone.hover {
+        border-color: var(--uui-color-primary,#3544b1);
+      }
+      #dropzone.hover::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        opacity: 0.2;
+        border-color: var(--uui-color-primary,#3544b1);
+        background-color: var(--uui-color-primary,#3544b1);
+      }
+      #symbol {
+        color: var(--uui-color-primary,#3544b1);
+        max-width: 100%;
+        max-height: 100%;
+      }
+      #input {
+        position: absolute;
+        width: 0px;
+        height: 0px;
+        opacity: 0;
+        display: none;
+      }
+    `
+];
+__decorateClass([
+  query("#input")
+], UUIFileDropzoneElement.prototype, "_input", 2);
+__decorateClass([
+  query("#dropzone")
+], UUIFileDropzoneElement.prototype, "_dropzone", 2);
+__decorateClass([
+  property({ type: String })
+], UUIFileDropzoneElement.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIFileDropzoneElement.prototype, "multiple", 2);
+UUIFileDropzoneElement = __decorateClass([
+  defineElement("uui-file-dropzone")
+], UUIFileDropzoneElement);
+
+export { UUIFileDropzoneElement };

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

@@ -0,0 +1,52 @@
+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.
+ *  @slot - For the content of the dropzone
+ *  @description - Dropzone for file upload. Supports native browsing and drag n drop.
+ */
+export declare class UUIFileDropzoneElement extends UUIFileDropzoneElement_base {
+    static styles: import("lit").CSSResult[];
+    private _input;
+    private _dropzone;
+    /**
+     * Accepted filetypes. Will allow all types if empty.
+     * @type {string}
+     * @attr
+     * @default false
+     */
+    accept: string;
+    /**
+     * Allows for multiple files to be selected.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    multiple: boolean;
+    /**
+     * Opens the native file picker to select a file.
+     * @method browse
+     */
+    browse(): void;
+    constructor();
+    connectedCallback(): void;
+    protected _checkIsItDirectory(dtItem: DataTransferItem): boolean;
+    private _getAllFileEntries;
+    private _readAllDirectoryEntries;
+    private _readEntriesPromise;
+    private _getFile;
+    private _isAccepted;
+    private _onDrop;
+    private _onDragOver;
+    private _onDragEnter;
+    private _onDragLeave;
+    private _onFileInputChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-file-dropzone': UUIFileDropzoneElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@umbraco-ui/uui-file-dropzone",
+  "version": "0.1.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "File Dropzone"
+  ],
+  "description": "Umbraco UI file-dropzone component.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-file-dropzone"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "0.2.0",
+    "@umbraco-ui/uui-symbol-file-dropzone": "0.1.0"
+  },
+  "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",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-file-dropzone",
+  "gitHead": "5494b55e03c9fb3ba8f160e693d3ce59c02d21cd"
+}