@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/umd/modules/@postnord/web-components/collection/components/input/pn-file-upload/pn-file-upload.js

@@ -0,0 +1,695 @@
+import { Component, Method, Element, State, Prop, Event, Watch, h } from "@stencil/core";
+import { getBytesFromHumanReadableFileSize, uuidv4 } from "../../../globals/helpers";
+import { PnFileUploadError } from "./pn-file-upload-error";
+export class PnFileUpload {
+  constructor() {
+    this.triggerElements = [];
+    this.renders = 0;
+    this.maxSize = "";
+    this.limit = 1;
+    this.invalid = false;
+    this.files = [];
+    this.maxSizeInBytes = 0;
+  }
+  componentWillLoad() {
+    this._initTriggerElements();
+    this._setDefaultValues();
+    this.initMaxBytes();
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+  }
+  componentWillUpdate() {
+    if (this.invalid) {
+      this.hostElement.classList.add("invalid");
+    }
+    else {
+      this.hostElement.classList.remove("invalid");
+    }
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+  }
+  initMaxBytes() {
+    this.maxSizeInBytes = getBytesFromHumanReadableFileSize(this.maxSize);
+  }
+  componentDidLoad() {
+    this.fileInputElement = this.hostElement.querySelector(".pn-file-upload-input");
+    this.fileInputElement.addEventListener("change", this._onAddFile.bind(this));
+  }
+  _setDefaultValues() {
+    if (this.limit > 1) {
+      this.multiple = true;
+    }
+  }
+  _initTriggerElements() {
+    const context = this;
+    this.triggerElements = Array.from(this.hostElement.querySelectorAll(".pn-open-file-explorer"));
+    this.triggerElements.forEach(function (element) {
+      if (element.dataset.canOpen !== "1") {
+        element.addEventListener("click", context.openFileExplorer.bind(context));
+        element.dataset.canOpen = "1";
+      }
+    });
+  }
+  _addFilesFromFileList(fileList) {
+    if (this.disabled || this.invalid) {
+      return;
+    }
+    const context = this;
+    const files = Array.from(fileList);
+    const promises = [];
+    if (this.multiple) {
+      files.forEach(function (file) {
+        promises.push(context._addFile(file));
+      });
+    }
+    else {
+      const file = files[0];
+      if (this.limit === 1) {
+        this.files = [];
+        promises.push(this._addFile(file));
+      }
+      else {
+        promises.push(this._addFile(file));
+      }
+    }
+    Promise.all(promises).then(function () {
+      context.filesAdded.emit(context.files);
+      context._isNotGreaterThanLimit();
+      context._checkValidity();
+      context._emitUpdateEvent();
+      context.fileInputElement.value = "";
+    });
+  }
+  _onAddFile() {
+    const files = this.fileInputElement.files;
+    return this._addFilesFromFileList(files);
+  }
+  _onDragOverFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.add("hover");
+  }
+  _onDragLeaveFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.remove("hover");
+  }
+  _onDropFile(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.hostElement.classList.remove("hover");
+    this._addFilesFromFileList(event.dataTransfer.files);
+  }
+  _validateFileType(file) {
+    const accepts = this.accept ? this.accept.split(",") : [];
+    if (accepts.length) {
+      let valid = false;
+      for (const accept of accepts) {
+        const type = accept.trim().toLowerCase();
+        const isMimeType = /^\w+\/[a-z\.\-]+$/i;
+        const extension = file.filename.substr(file.filename.lastIndexOf(".")).toLowerCase();
+        if (isMimeType.test(type) && file.contentType === type) {
+          valid = true;
+          break;
+        }
+        else if (extension === type) {
+          valid = true;
+          break;
+        }
+      }
+      if (!valid) {
+        const error = new PnFileUploadError(`Invalid file type.`, this.hostElement, "INVALID_FILE_TYPE", file);
+        this.invalid = true;
+        this.fileuploaderror.emit(error);
+        throw error;
+      }
+    }
+  }
+  _validateFileSize(file) {
+    if (this.maxSizeInBytes > 0 && file.filesize > this.maxSizeInBytes) {
+      const error = new PnFileUploadError(`You can only add up to ${this.maxSize}.`, this.hostElement, "MAX_FILE_SIZE", file);
+      this.invalid = true;
+      this.fileuploaderror.emit(error);
+      throw error;
+    }
+  }
+  _validateLimit() {
+    if (this.limit && this.files.length > this.limit) {
+      const error = new PnFileUploadError(`You can only add up to ${this.limit} files.`, this.hostElement, "MAX_LIMIT", this.files);
+      this.invalid = true;
+      this.fileuploaderror.emit(error);
+      throw error;
+    }
+  }
+  _isNotGreaterThanLimit() {
+    try {
+      this._validateLimit();
+      return true;
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  _checkValidity() {
+    if (!this.invalid) {
+      this.valid.emit(this);
+    }
+    this._initTriggerElements();
+    return !this.invalid;
+  }
+  _createBase64FromFile(file) {
+    return new Promise(function (resolve, reject) {
+      const reader = new FileReader();
+      reader.onload = function () {
+        resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        reject(error);
+      };
+      reader.onabort = function () {
+        reject("ABORTED");
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+  _addFile(file) {
+    const context = this;
+    return this._createBase64FromFile(file).then(function (data) {
+      const split = data.split(",");
+      const base64 = split[1];
+      const contentType = split[0].split(":")[1].split(";")[0];
+      const request = new XMLHttpRequest();
+      const uploadFile = {
+        uuid: uuidv4(),
+        filename: file.name,
+        filesize: file.size,
+        progress: 0,
+        status: "queue",
+        base64: base64,
+        contentType: contentType,
+        error: null,
+        errorMessage: "",
+        file: file,
+        xhr: request
+      };
+      try {
+        context._validateFileSize(uploadFile);
+        context._validateFileType(uploadFile);
+      }
+      catch (error) {
+        uploadFile.error = error;
+        uploadFile.progress = 100;
+        uploadFile.status = "error";
+      }
+      uploadFile.xhrPromise = function () {
+        return new Promise(function (resolve, reject) {
+          request.responseType = "json";
+          request.addEventListener("progress", function (event) {
+            if (event.lengthComputable) {
+              uploadFile.progress = (event.loaded / event.total) * 100;
+              context.updateFile(uploadFile);
+            }
+            else {
+              uploadFile.progress = 100;
+              context.updateFile(uploadFile);
+            }
+          });
+          request.addEventListener("load", function (response) {
+            resolve(response.target.response);
+          });
+          request.addEventListener("error", function (error) {
+            uploadFile.error = error;
+            uploadFile.errorMessage =
+              "There was an error uploading your file, please try again";
+            context.updateFile(uploadFile);
+            const errorEvent = new PnFileUploadError("There was an error uploading your file, please try again", context.hostElement, "UPLOAD_SERVER_ERROR", uploadFile);
+            context.fileuploaderror.emit(errorEvent);
+            reject(error);
+          });
+        });
+      };
+      context.files = [...context.files, uploadFile];
+      return uploadFile;
+    });
+  }
+  _removeFile(targetFile, context) {
+    return function (event) {
+      event.preventDefault();
+      context.removeFile(targetFile);
+    };
+  }
+  _emitUpdateEvent() {
+    this.update.emit({
+      files: this.files,
+      element: this
+    });
+  }
+  openFileExplorer(event) {
+    event.preventDefault();
+    if (!this.invalid && !this.disabled) {
+      this.fileInputElement.click();
+    }
+  }
+  async startUpload() {
+    const context = this;
+    if (!context.files.length) {
+      return;
+    }
+    context.files = context.files.map(function (file, index) {
+      if (file.status === "queue") {
+        file.status = "start";
+        context.uploadFile.emit({
+          file: file,
+          index: index,
+          uploader: context
+        });
+      }
+      return file;
+    });
+    const promises = context.files.map(function (file) {
+      return file.xhrPromise().catch(function () {
+        return;
+      });
+    });
+    Promise.all(promises).then(function (data) {
+      const added = data.filter(function (item) {
+        return item;
+      });
+      context.uploadCompleted.emit(added);
+    });
+  }
+  async clearUpload() {
+    this.files = [];
+    this.fileInputElement.value = "";
+    this.invalid = false;
+    this.filesAdded.emit([]);
+  }
+  async removeFile(targetFile) {
+    let valid = true;
+    const files = [];
+    for (const fileIndex in this.files) {
+      const file = this.files[fileIndex];
+      if (!file.filename) {
+        continue;
+      }
+      // add to files if the uuid doesn't match
+      if (file.uuid !== targetFile.uuid) {
+        try {
+          this._validateFileSize(file);
+          this._validateFileType(file);
+          valid = true;
+        }
+        catch (error) {
+          valid = false;
+          file.error = error;
+          file.progress = 100;
+          file.status = "error";
+        }
+        files.push(file);
+      }
+      else if (file.status === "start") {
+        file.xhr.abort();
+        this.uploadCancelled.emit(file);
+      }
+    }
+    this.filesAdded.emit(files);
+    this.files = files;
+    this.invalid = !valid || !this._isNotGreaterThanLimit();
+    this._checkValidity();
+    this._emitUpdateEvent();
+  }
+  async updateFile(file, index = null) {
+    let files = this.files;
+    // find the index if not defined
+    if (index === null) {
+      for (const fIndex in files) {
+        const fFile = files[fIndex];
+        if (fFile.uuid === file.uuid) {
+          index = fIndex;
+          break;
+        }
+      }
+    }
+    if (files[index]) {
+      if (file.progress >= 100) {
+        file.progress = 100;
+        file.status = "completed";
+      }
+      else if (file.progress < 0) {
+        file.status = "start";
+        file.progress = 0;
+      }
+      if (file.error) {
+        file.progress = 100;
+        file.status = "error";
+        file.errorMessage =
+          file.errorMessage ||
+            "There was an error uploading your file, please try again";
+      }
+      files[index] = file;
+    }
+    this.files = files;
+    this._forceRender();
+  }
+  // @bug: stenciljs fails to re-render the array (e.g. files) if the array length is not updated
+  _forceRender() {
+    this.renders = this.renders + 1;
+  }
+  render() {
+    return (h("div", { class: "pn-file-upload-container" },
+      h("div", { class: "pn-dropzone-container" },
+        h("div", { class: "pn-dropzone-inner" },
+          h("div", { class: "pn-file-upload-dropzone", onDragOver: this._onDragOverFile.bind(this), onDragLeave: this._onDragLeaveFile.bind(this), onDrop: this._onDropFile.bind(this) },
+            h("div", { class: "default-message-container" },
+              this.disabled || this.invalid ? (h("pn-icon", { class: "pn-file-upload-dropzone-icon", symbol: "disabled", color: "grey-06-rock" })) : (h("pn-icon", { class: "pn-file-upload-dropzone-icon", symbol: "upload", color: "grey-06-rock" })),
+              h("slot", null))))),
+      h("section", { class: "files-list" }, this.files.map((file) => (h("div", { class: "files-list-item-container" },
+        h("div", { class: "files-list-item" },
+          h("pn-progress-bar", { label: file.filename, "show-spinner": this.showSpinner &&
+              file.progress < 100 &&
+              file.status === "start", progress: file.progress, color: file.status === "error" ? "error" : "default", size: "small", width: "100%" }),
+          h("div", { class: "icon-button" }),
+          h("pn-icon", { symbol: "minus-circle", color: "grey-05-battleship", onClick: this._removeFile(file, this) })),
+        file.error ? (h("div", { class: "files-list-item-error" }, file.errorMessage || file.error.message)) : null)))),
+      h("input", { type: "file", name: "pnFileUpload[]", class: "pn-file-upload-input", multiple: this.multiple, accept: this.accept })));
+  }
+  static get is() { return "pn-file-upload"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-file-upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-file-upload.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "showSpinner": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-spinner",
+      "reflect": false
+    },
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accept",
+      "reflect": false
+    },
+    "maxSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-size",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "limit": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "limit",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "multiple",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "triggerElements": {},
+    "renders": {}
+  }; }
+  static get events() { return [{
+      "method": "filesAdded",
+      "name": "filesAdded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "update",
+      "name": "update",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "fileuploaderror",
+      "name": "fileuploaderror",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "valid",
+      "name": "valid",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "uploadFile",
+      "name": "uploadFile",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "uploadCancelled",
+      "name": "uploadCancelled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "uploadCompleted",
+      "name": "uploadCompleted",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "startUpload": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "clearUpload": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "removeFile": {
+      "complexType": {
+        "signature": "(targetFile: PnUploadFileItem) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "PnUploadFileItem": {
+            "location": "import",
+            "path": "../../../globals/types"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "updateFile": {
+      "complexType": {
+        "signature": "(file: PnUploadFileItem, index?: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "PnUploadFileItem": {
+            "location": "import",
+            "path": "../../../globals/types"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "maxSize",
+      "methodName": "initMaxBytes"
+    }]; }
+}