@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/collection/components/stzh-upload/stzh-upload.js

@@ -1,1358 +1,1391 @@
-import { Host, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
-import { fetchTranslations } from "../../utils/translation-utils";
-import { StzhInputDescription } from "../stzh-input/stzh-input-description";
-import Dropzone from "dropzone";
-Dropzone.autoDiscover = false;
-const ATTR_NAME = "data-dz-name";
-const ATTR_TYPE = "data-dz-type";
-const ATTR_EXTENSION = "data-dz-extension";
-const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
-let uploadCounter = 0;
-// Most properties taken over from:
-// https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js
-// Possible events to listen to:
-// https://github.com/dropzone/dropzone/blob/v5.9.3/src/dropzone.js#L17
-/**
- * @slot error - Slot for error
- */
-export class StzhUpload {
-  constructor() {
-    /* Initially pre existing files (e.g. already uploaded by the user) */
-    this.existingFiles = [];
-    this._existingFiles = [];
-    /** Label */
-    this.label = "";
-    /** Description */
-    this.description = "";
-    /** Button text */
-    this.button = "";
-    /**
-     * URL the files are processed to.
-     *
-     * You can also provide a function that will be called with `files` and
-     * `dataBlocks`  and must return the url as string.
-     */
-    this.url = "";
-    /**
-     * Can be changed to `"put"` if necessary. You can also provide a function
-     * that will be called with `files` and must return the method.
-     */
-    this.method = "post";
-    /**
-     * Will be set on the XHRequest.
-     */
-    this.withCredentials = false;
-    /**
-     * Whether the upload is disabled or not.
-     */
-    this.disabled = false;
-    /**
-     * Whether the upload is marked as invalid.
-     */
-    this.invalid = false;
-    /**
-     * The default implementation of `accept` checks the file's mime type or
-     * extension against this list. This is a comma separated list of mime
-     * types or file extensions.
-     *
-     * Eg.: `image/*,application/pdf,.psd`
-     *
-     * This option will also be used as
-     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
-     * parameter on the hidden file input as well.
-     */
-    this.acceptedFiles = null;
-    /**
-     * If false, files will be added to the queue but the queue will not be
-     * processed automatically.
-     * This can be useful if you need some additional user input before sending
-     * files (or if you want want all files sent at once).
-     * If you're ready to send the file simply call `element.processQueue()`.
-     */
-    this.autoProcessQueue = true;
-    /**
-     * If not `null` defines how many files this dropzone handles. If it exceeds,
-     * the event `stzhMaxfilesexceeded` will be called.
-     */
-    this.maxFiles = null;
-    /**
-     * The maximum filesize (in MiB) that is allowed to be uploaded.
-     */
-    this.maxFilesize = 25;
-    /**
-     * How many file uploads to process in parallel.
-     */
-    this.parallelUploads = 2;
-    /**
-     * Whether to send multiple files in one request. If
-     * this it set to true, then the fallback file input element will
-     * have the `multiple` attribute as well. This option will
-     * also trigger additional events (like `stzhSuccessMultiple`). See the events
-     * documentation section for more information.
-     */
-    this.uploadMultiple = false;
-    /**
-     * Whether you want files to be uploaded in chunks to your server. This can't be
-     * used in combination with `uploadMultiple`.
-     *
-     * See `chunksUploaded` prop for the callback to finalise an upload.
-     */
-    this.chunking = false;
-    /**
-     * If `chunking` is enabled, this defines whether **every** file should be chunked,
-     * even if the file size is below chunkSize. This means, that the additional chunk
-     * form data will be submitted and the `chunksUploaded` callback will be invoked.
-     */
-    this.forceChunking = false;
-    /**
-     * If `chunking` is `true`, then this defines the chunk size in bytes.
-     */
-    this.chunkSize = 2 * 1024 * 1024;
-    /**
-     * If `true`, the individual chunks of a file are being uploaded simultaneously.
-     */
-    this.parallelChunkUploads = false;
-    /**
-     * Whether a chunk should be retried if it fails.
-     */
-    this.retryChunks = false;
-    /**
-     * If `retryChunks` is true, how many times should it be retried.
-     */
-    this.retryChunksLimit = 3;
-    /**
-     * The base that is used to calculate the **displayed** filesize. You can
-     * change this to 1024 if you would rather display kibibytes, mebibytes,
-     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
-     * not `1 kilobyte`. You can change this to `1024` if you don't care about
-     * validity.
-     */
-    this.filesizeBase = 1000;
-    /**
-     * An optional object to send additional headers to the server. Eg:
-     * `{ "My-Awesome-Header": "header value" }`
-     */
-    this.headers = null;
-    /**
-     * Should the default headers be set or not?
-     * Accept: application/json <- for requesting json response
-     * Cache-Control: no-cache <- Request shouldnt be cached
-     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
-     */
-    this.defaultHeaders = true;
-    /**
-     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
-     * and a `done` function as parameters.
-     *
-     * If the done function is invoked without arguments, the file is "accepted" and will
-     * be processed. If you pass an error message, the file is rejected, and the error
-     * message will be displayed.
-     * This function will not be called if the file is too big or doesn't match the mime types.
-     */
-    this.accept = function (_file, done) {
-      return done();
-    };
-    /**
-     * The callback that will be invoked when all chunks have been uploaded for a file.
-     * It gets the file for which the chunks have been uploaded as the first parameter,
-     * and the `done` function as second. `done()` needs to be invoked when everything
-     * needed to finish the upload process is done.
-     */
-    this.chunksUploaded = function (_file, done) {
-      done();
-    };
-    /**
-     * This is the element the hidden input field (which is used when clicking on the
-     * dropzone to trigger file selection) will be appended to. This might
-     * be important in case you use frameworks to switch the content of your page.
-     *
-     * Can be a selector string, or an element directly.
-     */
-    this.hiddenInputContainer = "body";
-  }
-  existingFilesWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._existingFiles = JSON.parse(newValue);
-    }
-    else {
-      this._existingFiles = newValue;
-    }
-  }
-  disabledWatcher() {
-    if (this.disabled) {
-      this.dropzone.disable();
-    }
-    else {
-      this.dropzone.enable();
-    }
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  async processQueue() {
-    return this.dropzone.processQueue();
-  }
-  async componentWillLoad() {
-    this.uploadId = `stzh-upload-${uploadCounter++}`;
-    this.existingFilesWatcher(this.existingFiles);
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'upload');
-    }
-  }
-  componentDidRender() {
-    if (this.dropzone) {
-      return;
-    }
-    this.dropzone = new Dropzone(this.dropzoneElement, {
-      url: this.url,
-      method: this.method,
-      withCredentials: this.withCredentials,
-      clickable: [this.clickareaElement],
-      acceptedFiles: this.acceptedFiles,
-      accept: this.accept,
-      maxFiles: this.maxFiles,
-      maxFilesize: this.maxFilesize,
-      filesizeBase: this.filesizeBase,
-      parallelUploads: this.parallelUploads,
-      uploadMultiple: this.uploadMultiple,
-      autoProcessQueue: this.autoProcessQueue,
-      headers: this.headers,
-      defaultHeaders: this.defaultHeaders,
-      chunking: this.chunking,
-      chunkSize: this.chunkSize,
-      chunksUploaded: this.chunksUploaded,
-      forceChunking: this.forceChunking,
-      parallelChunkUploads: this.parallelChunkUploads,
-      retryChunks: this.retryChunks,
-      retryChunksLimit: this.retryChunksLimit,
-      createImageThumbnails: false,
-      hiddenInputContainer: this.hiddenInputContainer,
-      dictFileSizeUnits: { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" },
-      dictRemoveFileConfirmation: null,
-      dictMaxFilesExceeded: this.localization.maxFilesExceeded,
-      dictRemoveFile: this.localization.removeFile,
-      dictCancelUploadConfirmation: this.localization.cancelUploadConfirmation,
-      dictUploadCanceled: this.localization.uploadCanceled,
-      dictCancelUpload: this.localization.cancelUpload,
-      dictResponseError: this.localization.responseError,
-      dictInvalidFileType: this.localization.invalidFileType,
-      dictFileTooBig: this.localization.fileTooBig,
-      error: (file, message, xhr) => {
-        if (file.previewElement) {
-          file.previewElement.classList.add("dz-error");
-          if (typeof message !== "string" && message.error) {
-            message = message.error;
-          }
-          else if (xhr) {
-            if (xhr.status === 401 || xhr.status === 403) {
-              message = this.localization.accessError;
-            }
-            else if (xhr.status === 413) {
-              message = this.localization.fileTooBigServer;
-            }
-            else if (xhr.status === 415) {
-              message = this.localization.invalidFileType;
-            }
-            else if (xhr.status >= 500) {
-              message = this.localization.serverError;
-            }
-            else {
-              const defaultError = this.localization.responseError
-                .replace("{{statusCode}}", xhr.status);
-              message = defaultError;
-            }
-          }
-          for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
-            node.textContent = message;
-          }
-        }
-      },
-      previewTemplate: `
-      <div class="stzh-upload__preview">
-        <div class="stzh-upload__inner">
-          <div class="stzh-upload__image">
-            <img data-dz-thumbnail />
-          </div>
-
-          <div class="stzh-upload__details">
-            <div class="stzh-upload__info-wrapper-processing">
-              <div class="stzh-upload__infos">
-                <div class="stzh-upload__subtitle">
-                  <span data-dz-name></span>
-                </div>
-                <div class="stzh-upload__progress-text">
-                  <span data-dz-progress-text></span>
-                </div>
-              </div>
-              <div class="stzh-upload__progress">
-                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
-              </div>
-            </div>
-            <div class="stzh-upload__info-wrapper-complete">
-              <div class="stzh-upload__title">
-                <span data-dz-name></span>
-              </div>
-              <div class="stzh-upload__meta">
-                <span class="stzh-upload__extension" data-dz-extension></span>
-                |
-                <span class="stzh-upload__size" data-dz-size></span>
-              </div>
-              <div class="stzh-upload__error-message">
-                <span data-dz-errormessage></span>
-              </div>
-            </div>
-            <div class="stzh-upload__actions">
-              <button class="stzh-upload__delete" data-dz-remove title="${this.localization.cancelUpload}">
-                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
-                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      `
-    });
-    this.disabledWatcher();
-    this.dropzone.on("addedfile", (file) => this.stzhFileAdded.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("addedfiles", (files) => this.stzhFilesAdded.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("removedfile", (file) => this.stzhFileRemoved.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
-      component: "stzh-upload", file, xhr, formData
-    }));
-    this.dropzone.on("sendingmultiple", (files, xhr, formData) => this.stzhSendingMultiple.emit({
-      component: "stzh-upload", files, xhr, formData
-    }));
-    this.dropzone.on("processing", (file) => this.stzhProcessing.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("processingmultiple", (files) => this.stzhProcessingMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("uploadprogress", (file, progress, bytesSent) => this.stzhProgress.emit({
-      component: "stzh-upload", file, progress, bytesSent
-    }));
-    this.dropzone.on("totaluploadprogress", (totalUploadProgress, totalBytes, totalBytesSent) => this.stzhProgressTotal.emit({
-      component: "stzh-upload", totalUploadProgress, totalBytes, totalBytesSent
-    }));
-    this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
-      component: "stzh-upload", file, message, xhr
-    }));
-    this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
-      component: "stzh-upload", files, message, xhr
-    }));
-    this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
-      component: "stzh-upload", file, responseText, event
-    }));
-    this.dropzone.on("successmultiple", (files, responseText, event) => this.stzhSuccessMultiple.emit({
-      component: "stzh-upload", files, responseText, event
-    }));
-    this.dropzone.on("canceled", (file) => this.stzhCanceled.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("canceledmultiple", (files) => this.stzhCanceledMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("complete", (file) => this.stzhComplete.emit({
-      component: "stzh-upload", file
-    }));
-    this.dropzone.on("completemultiple", (files) => this.stzhCompleteMultiple.emit({
-      component: "stzh-upload", files
-    }));
-    this.dropzone.on("addedfile", (file) => {
-      file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
-        name.setAttribute("title", file.name);
-      });
-      file.previewElement.querySelectorAll(`[${ATTR_TYPE}]`).forEach((type) => {
-        type.innerText = file.type;
-      });
-      file.previewElement.querySelectorAll(`[${ATTR_EXTENSION}]`).forEach((extension) => {
-        extension.innerText = file.name.split(".").pop();
-      });
-    });
-    this.dropzone.on("uploadprogress", (file, progress) => {
-      file.previewElement.querySelectorAll(`[${ATTR_PROGRESS_TEXT}]`).forEach((progressText) => {
-        progressText.innerText = `${progress.toString()}%`;
-      });
-    });
-    this._existingFiles.forEach((file) => {
-      this.dropzone.displayExistingFile(file, null, null, null, null);
-    });
-  }
-  disconnectedCallback() {
-    if (this.dropzone) {
-      this.dropzone.destroy();
-      this.dropzone = null;
-    }
-  }
-  render() {
-    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-upload": true,
-      "stzh-upload--is-invalid": this.invalid,
-      "stzh-upload--is-disabled": this.disabled,
-      "stzh-upload--has-error": errorUsed,
-      "stzh-upload--has-instructions": !!this.description || !!this.localization.description
-    };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), h("stzh-button", { size: "small", class: "stzh-upload__button", "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))));
-  }
-  static get is() { return "stzh-upload"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-upload.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-upload.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "existingFiles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhUploadFilesItem[] | string",
-          "resolved": "StzhUploadFilesItem[] | string",
-          "references": {
-            "StzhUploadFilesItem": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "existing-files",
-        "reflect": false,
-        "defaultValue": "[]"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "description": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Description"
-        },
-        "attribute": "description",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "button": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Button text"
-        },
-        "attribute": "button",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "url": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | Function",
-          "resolved": "Function | string",
-          "references": {
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "URL the files are processed to.\r\n\r\nYou can also provide a function that will be called with `files` and\r\n`dataBlocks`  and must return the url as string."
-        },
-        "attribute": "url",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "method": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"post\" | \"put\" | Function",
-          "resolved": "\"post\" | \"put\" | Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Can be changed to `\"put\"` if necessary. You can also provide a function\r\nthat will be called with `files` and must return the method."
-        },
-        "attribute": "method",
-        "reflect": false,
-        "defaultValue": "\"post\""
-      },
-      "withCredentials": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Will be set on the XHRequest."
-        },
-        "attribute": "with-credentials",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the upload is disabled or not."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the upload is marked as invalid."
-        },
-        "attribute": "invalid",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "One or multiple error message (use error slot as alternative)"
-        },
-        "attribute": "error",
-        "reflect": false
-      },
-      "acceptedFiles": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | null",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The default implementation of `accept` checks the file's mime type or\r\nextension against this list. This is a comma separated list of mime\r\ntypes or file extensions.\r\n\r\nEg.: `image/*,application/pdf,.psd`\r\n\r\nThis option will also be used as\r\n[`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)\r\nparameter on the hidden file input as well."
-        },
-        "attribute": "accepted-files",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "autoProcessQueue": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If false, files will be added to the queue but the queue will not be\r\nprocessed automatically.\r\nThis can be useful if you need some additional user input before sending\r\nfiles (or if you want want all files sent at once).\r\nIf you're ready to send the file simply call `element.processQueue()`."
-        },
-        "attribute": "auto-process-queue",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "maxFiles": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number | null",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If not `null` defines how many files this dropzone handles. If it exceeds,\r\nthe event `stzhMaxfilesexceeded` will be called."
-        },
-        "attribute": "max-files",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "maxFilesize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The maximum filesize (in MiB) that is allowed to be uploaded."
-        },
-        "attribute": "max-filesize",
-        "reflect": false,
-        "defaultValue": "25"
-      },
-      "parallelUploads": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "How many file uploads to process in parallel."
-        },
-        "attribute": "parallel-uploads",
-        "reflect": false,
-        "defaultValue": "2"
-      },
-      "uploadMultiple": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether to send multiple files in one request. If\r\nthis it set to true, then the fallback file input element will\r\nhave the `multiple` attribute as well. This option will\r\nalso trigger additional events (like `stzhSuccessMultiple`). See the events\r\ndocumentation section for more information."
-        },
-        "attribute": "upload-multiple",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "chunking": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether you want files to be uploaded in chunks to your server. This can't be\r\nused in combination with `uploadMultiple`.\r\n\r\nSee `chunksUploaded` prop for the callback to finalise an upload."
-        },
-        "attribute": "chunking",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "forceChunking": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `chunking` is enabled, this defines whether **every** file should be chunked,\r\neven if the file size is below chunkSize. This means, that the additional chunk\r\nform data will be submitted and the `chunksUploaded` callback will be invoked."
-        },
-        "attribute": "force-chunking",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "chunkSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `chunking` is `true`, then this defines the chunk size in bytes."
-        },
-        "attribute": "chunk-size",
-        "reflect": false,
-        "defaultValue": "2 * 1024 * 1024"
-      },
-      "parallelChunkUploads": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the individual chunks of a file are being uploaded simultaneously."
-        },
-        "attribute": "parallel-chunk-uploads",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "retryChunks": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether a chunk should be retried if it fails."
-        },
-        "attribute": "retry-chunks",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "retryChunksLimit": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `retryChunks` is true, how many times should it be retried."
-        },
-        "attribute": "retry-chunks-limit",
-        "reflect": false,
-        "defaultValue": "3"
-      },
-      "filesizeBase": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The base that is used to calculate the **displayed** filesize. You can\r\nchange this to 1024 if you would rather display kibibytes, mebibytes,\r\netc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`\r\nnot `1 kilobyte`. You can change this to `1024` if you don't care about\r\nvalidity."
-        },
-        "attribute": "filesize-base",
-        "reflect": false,
-        "defaultValue": "1000"
-      },
-      "headers": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "object | null",
-          "resolved": "object",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "An optional object to send additional headers to the server. Eg:\r\n`{ \"My-Awesome-Header\": \"header value\" }`"
-        },
-        "defaultValue": "null"
-      },
-      "defaultHeaders": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the default headers be set or not?\r\nAccept: application/json <- for requesting json response\r\nCache-Control: no-cache <- Request shouldnt be cached\r\nX-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest"
-        },
-        "attribute": "default-headers",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "accept": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Function",
-          "resolved": "Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)\r\nand a `done` function as parameters.\r\n\r\nIf the done function is invoked without arguments, the file is \"accepted\" and will\r\nbe processed. If you pass an error message, the file is rejected, and the error\r\nmessage will be displayed.\r\nThis function will not be called if the file is too big or doesn't match the mime types."
-        },
-        "defaultValue": "function(_file, done) {\r\n    return done();\r\n  }"
-      },
-      "chunksUploaded": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Function",
-          "resolved": "Function",
-          "references": {
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The callback that will be invoked when all chunks have been uploaded for a file.\r\nIt gets the file for which the chunks have been uploaded as the first parameter,\r\nand the `done` function as second. `done()` needs to be invoked when everything\r\nneeded to finish the upload process is done."
-        },
-        "defaultValue": "function(_file, done) {\r\n    done();\r\n  }"
-      },
-      "hiddenInputContainer": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | HTMLElement",
-          "resolved": "HTMLElement | string",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "This is the element the hidden input field (which is used when clicking on the\r\ndropzone to trigger file selection) will be appended to. This might\r\nbe important in case you use frameworks to switch the content of your page.\r\n\r\nCan be a selector string, or an element directly."
-        },
-        "attribute": "hidden-input-container",
-        "reflect": false,
-        "defaultValue": "\"body\""
-      },
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhUploadLocalizedText",
-          "resolved": "StzhLocaleComponent & { description: string; button: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
-          "references": {
-            "StzhUploadLocalizedText": {
-              "location": "import",
-              "path": "./stzh-upload.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings."
-        }
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhFileAdded",
-        "name": "stzhFileAdded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "File added"
-        },
-        "complexType": {
-          "original": "StzhUploadFileAddedEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
-          "references": {
-            "StzhUploadFileAddedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhFilesAdded",
-        "name": "stzhFilesAdded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Files added (multiple)"
-        },
-        "complexType": {
-          "original": "StzhUploadFilesAddedEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
-          "references": {
-            "StzhUploadFilesAddedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhFileRemoved",
-        "name": "stzhFileRemoved",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "File removed"
-        },
-        "complexType": {
-          "original": "StzhUploadFileRemovedEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
-          "references": {
-            "StzhUploadFileRemovedEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhSending",
-        "name": "stzhSending",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Before sending file (add additional data before request if necessary)"
-        },
-        "complexType": {
-          "original": "StzhUploadSendingEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; xhr: XMLHttpRequest; formData: FormData; }",
-          "references": {
-            "StzhUploadSendingEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhSendingMultiple",
-        "name": "stzhSendingMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Before sending multiple files (add additional data before request if necessary)"
-        },
-        "complexType": {
-          "original": "StzhUploadSendingMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; xhr: XMLHttpRequest; formData: FormData; }",
-          "references": {
-            "StzhUploadSendingMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhProcessing",
-        "name": "stzhProcessing",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Files starting to get processed"
-        },
-        "complexType": {
-          "original": "StzhUploadProcessingEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
-          "references": {
-            "StzhUploadProcessingEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhProcessingMultiple",
-        "name": "stzhProcessingMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Files starting to get processed (multiple)"
-        },
-        "complexType": {
-          "original": "StzhUploadProcessingMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
-          "references": {
-            "StzhUploadProcessingMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhProgress",
-        "name": "stzhProgress",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Upload file progress during upload"
-        },
-        "complexType": {
-          "original": "StzhUploadProgressEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; progress: number; bytesSent: number; }",
-          "references": {
-            "StzhUploadProgressEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhProgressTotal",
-        "name": "stzhProgressTotal",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Upload total file progress during upload"
-        },
-        "complexType": {
-          "original": "StzhUploadProgressTotalEvent",
-          "resolved": "{ component: \"stzh-upload\"; totalUploadProgress: number; totalBytes: number; totalBytesSent: number; }",
-          "references": {
-            "StzhUploadProgressTotalEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhError",
-        "name": "stzhError",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "File error"
-        },
-        "complexType": {
-          "original": "StzhUploadErrorEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; message: string; xhr: XMLHttpRequest; }",
-          "references": {
-            "StzhUploadErrorEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhErrorMultiple",
-        "name": "stzhErrorMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Files error (multiple files)"
-        },
-        "complexType": {
-          "original": "StzhUploadErrorMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; message: string; xhr: XMLHttpRequest; }",
-          "references": {
-            "StzhUploadErrorMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhSuccess",
-        "name": "stzhSuccess",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "File successfully uploaded"
-        },
-        "complexType": {
-          "original": "StzhUploadSuccessEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; responseText: string; event: ProgressEvent<EventTarget>; }",
-          "references": {
-            "StzhUploadSuccessEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhSuccessMultiple",
-        "name": "stzhSuccessMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Files successfully uploaded (multiple files)"
-        },
-        "complexType": {
-          "original": "StzhUploadSuccessMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; responseText: string; event: ProgressEvent<EventTarget>; }",
-          "references": {
-            "StzhUploadSuccessMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhCanceled",
-        "name": "stzhCanceled",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Canceled file upload"
-        },
-        "complexType": {
-          "original": "StzhUploadCanceledEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
-          "references": {
-            "StzhUploadCanceledEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhCanceledMultiple",
-        "name": "stzhCanceledMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Canceled file upload (multiple files)"
-        },
-        "complexType": {
-          "original": "StzhUploadCanceledMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
-          "references": {
-            "StzhUploadCanceledMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhComplete",
-        "name": "stzhComplete",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Completed upload (successfully or with error)"
-        },
-        "complexType": {
-          "original": "StzhUploadCompleteEvent",
-          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
-          "references": {
-            "StzhUploadCompleteEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhCompleteMultiple",
-        "name": "stzhCompleteMultiple",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Completed upload (successfully or with error, multiple files)"
-        },
-        "complexType": {
-          "original": "StzhUploadCompleteMultipleEvent",
-          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
-          "references": {
-            "StzhUploadCompleteMultipleEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "processQueue": {
-        "complexType": {
-          "signature": "() => Promise<any>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "existingFiles",
-        "methodName": "existingFilesWatcher"
-      }, {
-        "propName": "disabled",
-        "methodName": "disabledWatcher"
-      }, {
-        "propName": "error",
-        "methodName": "errorWatcher"
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+import Dropzone from "dropzone";
+Dropzone.autoDiscover = false;
+const ATTR_NAME = "data-dz-name";
+const ATTR_TYPE = "data-dz-type";
+const ATTR_EXTENSION = "data-dz-extension";
+const ATTR_PROGRESS_TEXT = "data-dz-progress-text";
+let uploadCounter = 0;
+// Most properties taken over from:
+// https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js
+// Possible events to listen to:
+// https://github.com/dropzone/dropzone/blob/v5.9.3/src/dropzone.js#L17
+/**
+ * @slot error - Slot for error
+ */
+export class StzhUpload {
+  constructor() {
+    /**
+     * Initially pre existing files (e.g. already uploaded by the user).
+     * Array of objects that must at least include `name` and `size` attribute:
+     * `[{"name":"file1.txt", "size": 12345}, {"name":"file2.txt", "size": 12345}]`
+     */
+    this.existingFiles = [];
+    this._existingFiles = [];
+    /** Label */
+    this.label = "";
+    /** Description */
+    this.description = "";
+    /** Button text */
+    this.button = "";
+    /**
+     * URL the files are processed to.
+     *
+     * You can also provide a function that will be called with `files` and
+     * `dataBlocks`  and must return the url as string.
+     */
+    this.url = "";
+    /**
+     * Can be changed to `"put"` if necessary. You can also provide a function
+     * that will be called with `files` and must return the method.
+     */
+    this.method = "post";
+    /**
+     * Will be set on the XHRequest.
+     */
+    this.withCredentials = false;
+    /**
+     * Whether the upload is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * Whether the upload is marked as invalid.
+     */
+    this.invalid = false;
+    /**
+     * The default implementation of `accept` checks the file's mime type or
+     * extension against this list. This is a comma separated list of mime
+     * types or file extensions.
+     *
+     * Eg.: `image/*,application/pdf,.psd`
+     *
+     * This option will also be used as
+     * [`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)
+     * parameter on the hidden file input as well.
+     */
+    this.acceptedFiles = null;
+    /**
+     * If false, files will be added to the queue but the queue will not be
+     * processed automatically.
+     * This can be useful if you need some additional user input before sending
+     * files (or if you want want all files sent at once).
+     * If you're ready to send the file simply call `element.processQueue()`.
+     */
+    this.autoProcessQueue = true;
+    /**
+     * If not `null` defines how many files this dropzone handles. If it exceeds,
+     * the event `stzhMaxfilesexceeded` will be called.
+     */
+    this.maxFiles = null;
+    /**
+     * The maximum filesize (in MiB) that is allowed to be uploaded.
+     */
+    this.maxFilesize = 25;
+    /**
+     * How many file uploads to process in parallel.
+     */
+    this.parallelUploads = 2;
+    /**
+     * Whether to send multiple files in one request. If
+     * this it set to true, then the fallback file input element will
+     * have the `multiple` attribute as well. This option will
+     * also trigger additional events (like `stzhSuccessMultiple`). See the events
+     * documentation section for more information.
+     */
+    this.uploadMultiple = false;
+    /**
+     * Whether you want files to be uploaded in chunks to your server. This can't be
+     * used in combination with `uploadMultiple`.
+     *
+     * See `chunksUploaded` prop for the callback to finalise an upload.
+     */
+    this.chunking = false;
+    /**
+     * If `chunking` is enabled, this defines whether **every** file should be chunked,
+     * even if the file size is below chunkSize. This means, that the additional chunk
+     * form data will be submitted and the `chunksUploaded` callback will be invoked.
+     */
+    this.forceChunking = false;
+    /**
+     * If `chunking` is `true`, then this defines the chunk size in bytes.
+     */
+    this.chunkSize = 2 * 1024 * 1024;
+    /**
+     * If `true`, the individual chunks of a file are being uploaded simultaneously.
+     */
+    this.parallelChunkUploads = false;
+    /**
+     * Whether a chunk should be retried if it fails.
+     */
+    this.retryChunks = false;
+    /**
+     * If `retryChunks` is true, how many times should it be retried.
+     */
+    this.retryChunksLimit = 3;
+    /**
+     * The base that is used to calculate the **displayed** filesize. You can
+     * change this to 1024 if you would rather display kibibytes, mebibytes,
+     * etc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`
+     * not `1 kilobyte`. You can change this to `1024` if you don't care about
+     * validity.
+     */
+    this.filesizeBase = 1000;
+    /**
+     * An optional object to send additional headers to the server. Eg:
+     * `{ "My-Awesome-Header": "header value" }`
+     */
+    this.headers = null;
+    /**
+     * Should the default headers be set or not?
+     * Accept: application/json <- for requesting json response
+     * Cache-Control: no-cache <- Request shouldnt be cached
+     * X-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest
+     */
+    this.defaultHeaders = true;
+    /**
+     * A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)
+     * and a `done` function as parameters.
+     *
+     * If the done function is invoked without arguments, the file is "accepted" and will
+     * be processed. If you pass an error message, the file is rejected, and the error
+     * message will be displayed.
+     * This function will not be called if the file is too big or doesn't match the mime types.
+     */
+    this.accept = function (_file, done) {
+      return done();
+    };
+    /**
+     * The callback that will be invoked when all chunks have been uploaded for a file.
+     * It gets the file for which the chunks have been uploaded as the first parameter,
+     * and the `done` function as second. `done()` needs to be invoked when everything
+     * needed to finish the upload process is done.
+     */
+    this.chunksUploaded = function (_file, done) {
+      done();
+    };
+    /**
+     * This is the element the hidden input field (which is used when clicking on the
+     * dropzone to trigger file selection) will be appended to. This might
+     * be important in case you use frameworks to switch the content of your page.
+     *
+     * Can be a selector string, or an element directly.
+     */
+    this.hiddenInputContainer = "body";
+  }
+  existingFilesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._existingFiles = JSON.parse(newValue);
+    }
+    else {
+      this._existingFiles = newValue;
+    }
+  }
+  disabledWatcher() {
+    if (this.disabled) {
+      this.dropzone.disable();
+    }
+    else {
+      this.dropzone.enable();
+    }
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async processQueue() {
+    return this.dropzone.processQueue();
+  }
+  async componentWillLoad() {
+    this.uploadId = `stzh-upload-${uploadCounter++}`;
+    this.existingFilesWatcher(this.existingFiles);
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'upload');
+    }
+  }
+  componentDidRender() {
+    if (this.dropzone) {
+      return;
+    }
+    const self = this;
+    this.dropzone = new Dropzone(this.dropzoneElement, {
+      url: this.url,
+      method: this.method,
+      withCredentials: this.withCredentials,
+      clickable: [this.clickareaElement],
+      acceptedFiles: this.acceptedFiles,
+      accept: this.accept,
+      maxFiles: this.maxFiles,
+      maxFilesize: this.maxFilesize,
+      filesizeBase: this.filesizeBase,
+      parallelUploads: this.parallelUploads,
+      uploadMultiple: this.uploadMultiple,
+      autoProcessQueue: this.autoProcessQueue,
+      headers: this.headers,
+      defaultHeaders: this.defaultHeaders,
+      chunking: this.chunking,
+      chunkSize: this.chunkSize,
+      chunksUploaded: this.chunksUploaded,
+      forceChunking: this.forceChunking,
+      parallelChunkUploads: this.parallelChunkUploads,
+      retryChunks: this.retryChunks,
+      retryChunksLimit: this.retryChunksLimit,
+      createImageThumbnails: false,
+      hiddenInputContainer: this.hiddenInputContainer,
+      dictFileSizeUnits: { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" },
+      dictRemoveFileConfirmation: null,
+      dictMaxFilesExceeded: this.localization.maxFilesExceeded,
+      dictRemoveFile: this.localization.removeFile,
+      dictCancelUploadConfirmation: this.localization.cancelUploadConfirmation,
+      dictUploadCanceled: this.localization.uploadCanceled,
+      dictCancelUpload: this.localization.cancelUpload,
+      dictResponseError: this.localization.responseError,
+      dictInvalidFileType: this.localization.invalidFileType,
+      dictFileTooBig: this.localization.fileTooBig,
+      // When the upload is finished, either with success or an error.
+      // Taken from https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L752
+      complete(file) {
+        for (let node of file.previewElement.querySelectorAll("[data-dz-remove]")) {
+          node.setAttribute('title', this.options.dictRemoveFile);
+          node.setAttribute('aria-label', this.options.dictRemoveFile);
+        }
+        // move file uploads with errors to another element, so they are grouped together
+        if (file.status === "error") {
+          self.errorsElement.appendChild(file.previewElement);
+        }
+        if (file._removeLink) {
+          file._removeLink.innerHTML = this.options.dictRemoveFile;
+        }
+        if (file.previewElement) {
+          return file.previewElement.classList.add("dz-complete");
+        }
+      },
+      // Called whenever a file is removed.
+      // Taken fom https://github.com/dropzone/dropzone/blob/v5.9.3/src/options.js#L649
+      removedfile(file) {
+        if (file.previewElement != null && file.previewElement.parentNode != null) {
+          file.previewElement.parentNode.removeChild(file.previewElement);
+        }
+        // set focus to upload
+        self.buttonElement.setFocus();
+        return this._updateMaxFilesReachedClass();
+      },
+      error(file, message, xhr) {
+        if (file.previewElement) {
+          file.previewElement.classList.add("dz-error");
+          if (typeof message !== "string" && message.error) {
+            message = message.error;
+          }
+          else if (xhr) {
+            if (xhr.status === 401 || xhr.status === 403) {
+              message = self.localization.accessError;
+            }
+            else if (xhr.status === 413) {
+              message = self.localization.fileTooBigServer;
+            }
+            else if (xhr.status === 415) {
+              message = self.localization.invalidFileType;
+            }
+            else if (xhr.status >= 500) {
+              message = self.localization.serverError;
+            }
+            else {
+              const defaultError = self.localization.responseError
+                .replace("{{statusCode}}", xhr.status);
+              message = defaultError;
+            }
+          }
+          for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
+            node.textContent = message;
+          }
+        }
+      },
+      previewTemplate: `
+      <div class="stzh-upload__preview">
+        <div class="stzh-upload__inner">
+          <div class="stzh-upload__image">
+            <img data-dz-thumbnail />
+          </div>
+
+          <div class="stzh-upload__details">
+            <div class="stzh-upload__info-wrapper-processing">
+              <div class="stzh-upload__infos">
+                <div class="stzh-upload__subtitle">
+                  <span data-dz-name></span>
+                </div>
+                <div class="stzh-upload__progress-text">
+                  <span data-dz-progress-text></span>
+                </div>
+              </div>
+              <div class="stzh-upload__progress">
+                <span class="stzh-upload__progress-bar" data-dz-uploadprogress></span>
+              </div>
+            </div>
+            <div class="stzh-upload__info-wrapper-complete">
+              <div class="stzh-upload__title">
+                <span data-dz-name></span>
+              </div>
+              <div class="stzh-upload__meta">
+                <span class="stzh-upload__extension" data-dz-extension></span>
+                |
+                <span class="stzh-upload__size" data-dz-size></span>
+              </div>
+              <div class="stzh-upload__error-message">
+                <span data-dz-errormessage></span>
+              </div>
+            </div>
+            <div class="stzh-upload__actions">
+              <button class="stzh-upload__delete" data-dz-remove aria-label="${this.localization.cancelUpload}" title="${this.localization.cancelUpload}">
+                <stzh-icon class="stzh-upload__delete-icon" name="delete"></stzh-icon>
+                <stzh-icon class="stzh-upload__delete-icon-error" name="close"></stzh-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      `
+    });
+    this.disabledWatcher();
+    this.dropzone.on("addedfile", (file) => this.stzhFileAdded.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("addedfiles", (files) => this.stzhFilesAdded.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("removedfile", (file) => this.stzhFileRemoved.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("sending", (file, xhr, formData) => this.stzhSending.emit({
+      component: "stzh-upload", file, xhr, formData
+    }));
+    this.dropzone.on("sendingmultiple", (files, xhr, formData) => this.stzhSendingMultiple.emit({
+      component: "stzh-upload", files, xhr, formData
+    }));
+    this.dropzone.on("processing", (file) => this.stzhProcessing.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("processingmultiple", (files) => this.stzhProcessingMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("uploadprogress", (file, progress, bytesSent) => this.stzhProgress.emit({
+      component: "stzh-upload", file, progress, bytesSent
+    }));
+    this.dropzone.on("totaluploadprogress", (totalUploadProgress, totalBytes, totalBytesSent) => this.stzhProgressTotal.emit({
+      component: "stzh-upload", totalUploadProgress, totalBytes, totalBytesSent
+    }));
+    this.dropzone.on("error", (file, message, xhr) => this.stzhError.emit({
+      component: "stzh-upload", file, message, xhr
+    }));
+    this.dropzone.on("errormultiple", (files, message, xhr) => this.stzhErrorMultiple.emit({
+      component: "stzh-upload", files, message, xhr
+    }));
+    this.dropzone.on("success", (file, responseText, event) => this.stzhSuccess.emit({
+      component: "stzh-upload", file, responseText, event
+    }));
+    this.dropzone.on("successmultiple", (files, responseText, event) => this.stzhSuccessMultiple.emit({
+      component: "stzh-upload", files, responseText, event
+    }));
+    this.dropzone.on("canceled", (file) => this.stzhCanceled.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("canceledmultiple", (files) => this.stzhCanceledMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("complete", (file) => this.stzhComplete.emit({
+      component: "stzh-upload", file
+    }));
+    this.dropzone.on("completemultiple", (files) => this.stzhCompleteMultiple.emit({
+      component: "stzh-upload", files
+    }));
+    this.dropzone.on("addedfile", (file) => {
+      file.previewElement.querySelectorAll(`[${ATTR_NAME}]`).forEach((name) => {
+        name.setAttribute("title", file.name);
+      });
+      file.previewElement.querySelectorAll(`[${ATTR_TYPE}]`).forEach((type) => {
+        type.innerText = file.type;
+      });
+      file.previewElement.querySelectorAll(`[${ATTR_EXTENSION}]`).forEach((extension) => {
+        extension.innerText = file.name.split(".").pop();
+      });
+    });
+    this.dropzone.on("uploadprogress", (file, progress) => {
+      file.previewElement.querySelectorAll(`[${ATTR_PROGRESS_TEXT}]`).forEach((progressText) => {
+        progressText.innerText = `${progress.toString()}%`;
+      });
+    });
+    this._existingFiles.forEach((file) => {
+      this.dropzone.displayExistingFile(file, null, null, null, null);
+    });
+  }
+  disconnectedCallback() {
+    if (this.dropzone) {
+      this.dropzone.destroy();
+      this.dropzone = null;
+    }
+  }
+  render() {
+    const errorUsed = hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-upload": true,
+      "stzh-upload--is-invalid": this.invalid,
+      "stzh-upload--is-disabled": this.disabled,
+      "stzh-upload--has-error": errorUsed,
+      "stzh-upload--has-instructions": !!this.description || !!this.localization.description
+    };
+    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.dropzoneElement = el) }, this.label && h("div", { class: "stzh-upload__label" }, this.label), h("div", { class: "stzh-upload__clickarea", ref: (el) => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, this.description ? this.description : this.localization.description), h("stzh-button", { size: "small", class: "stzh-upload__button", ref: (el) => (this.buttonElement = el), "aria-describedby": `${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled }, this.button ? this.button : this.localization.button)), h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }), h("div", { class: "stzh-upload__errors", ref: (el) => (this.errorsElement = el) }))));
+  }
+  static get is() { return "stzh-upload"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-upload.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-upload.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "existingFiles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhUploadFilesItem[] | string",
+          "resolved": "StzhUploadFilesItem[] | string",
+          "references": {
+            "StzhUploadFilesItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Initially pre existing files (e.g. already uploaded by the user).\nArray of objects that must at least include `name` and `size` attribute:\n`[{\"name\":\"file1.txt\", \"size\": 12345}, {\"name\":\"file2.txt\", \"size\": 12345}]`"
+        },
+        "attribute": "existing-files",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Description"
+        },
+        "attribute": "description",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "button": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button text"
+        },
+        "attribute": "button",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Function",
+          "resolved": "Function | string",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL the files are processed to.\n\nYou can also provide a function that will be called with `files` and\n`dataBlocks`  and must return the url as string."
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "method": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"post\" | \"put\" | Function",
+          "resolved": "\"post\" | \"put\" | Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Can be changed to `\"put\"` if necessary. You can also provide a function\nthat will be called with `files` and must return the method."
+        },
+        "attribute": "method",
+        "reflect": false,
+        "defaultValue": "\"post\""
+      },
+      "withCredentials": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Will be set on the XHRequest."
+        },
+        "attribute": "with-credentials",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the upload is disabled or not."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the upload is marked as invalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "One or multiple error message (use error slot as alternative)"
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "acceptedFiles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default implementation of `accept` checks the file's mime type or\nextension against this list. This is a comma separated list of mime\ntypes or file extensions.\n\nEg.: `image/*,application/pdf,.psd`\n\nThis option will also be used as\n[`accept`](https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-accept)\nparameter on the hidden file input as well."
+        },
+        "attribute": "accepted-files",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "autoProcessQueue": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If false, files will be added to the queue but the queue will not be\nprocessed automatically.\nThis can be useful if you need some additional user input before sending\nfiles (or if you want want all files sent at once).\nIf you're ready to send the file simply call `element.processQueue()`."
+        },
+        "attribute": "auto-process-queue",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "maxFiles": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number | null",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If not `null` defines how many files this dropzone handles. If it exceeds,\nthe event `stzhMaxfilesexceeded` will be called."
+        },
+        "attribute": "max-files",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "maxFilesize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum filesize (in MiB) that is allowed to be uploaded."
+        },
+        "attribute": "max-filesize",
+        "reflect": false,
+        "defaultValue": "25"
+      },
+      "parallelUploads": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How many file uploads to process in parallel."
+        },
+        "attribute": "parallel-uploads",
+        "reflect": false,
+        "defaultValue": "2"
+      },
+      "uploadMultiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to send multiple files in one request. If\nthis it set to true, then the fallback file input element will\nhave the `multiple` attribute as well. This option will\nalso trigger additional events (like `stzhSuccessMultiple`). See the events\ndocumentation section for more information."
+        },
+        "attribute": "upload-multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "chunking": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether you want files to be uploaded in chunks to your server. This can't be\nused in combination with `uploadMultiple`.\n\nSee `chunksUploaded` prop for the callback to finalise an upload."
+        },
+        "attribute": "chunking",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "forceChunking": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `chunking` is enabled, this defines whether **every** file should be chunked,\neven if the file size is below chunkSize. This means, that the additional chunk\nform data will be submitted and the `chunksUploaded` callback will be invoked."
+        },
+        "attribute": "force-chunking",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "chunkSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `chunking` is `true`, then this defines the chunk size in bytes."
+        },
+        "attribute": "chunk-size",
+        "reflect": false,
+        "defaultValue": "2 * 1024 * 1024"
+      },
+      "parallelChunkUploads": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the individual chunks of a file are being uploaded simultaneously."
+        },
+        "attribute": "parallel-chunk-uploads",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "retryChunks": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether a chunk should be retried if it fails."
+        },
+        "attribute": "retry-chunks",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "retryChunksLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `retryChunks` is true, how many times should it be retried."
+        },
+        "attribute": "retry-chunks-limit",
+        "reflect": false,
+        "defaultValue": "3"
+      },
+      "filesizeBase": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The base that is used to calculate the **displayed** filesize. You can\nchange this to 1024 if you would rather display kibibytes, mebibytes,\netc... 1024 is technically incorrect, because `1024 bytes` are `1 kibibyte`\nnot `1 kilobyte`. You can change this to `1024` if you don't care about\nvalidity."
+        },
+        "attribute": "filesize-base",
+        "reflect": false,
+        "defaultValue": "1000"
+      },
+      "headers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object | null",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "An optional object to send additional headers to the server. Eg:\n`{ \"My-Awesome-Header\": \"header value\" }`"
+        },
+        "defaultValue": "null"
+      },
+      "defaultHeaders": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Should the default headers be set or not?\nAccept: application/json <- for requesting json response\nCache-Control: no-cache <- Request shouldnt be cached\nX-Requested-With: XMLHttpRequest <- We sent the request via XMLHttpRequest"
+        },
+        "attribute": "default-headers",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "accept": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A function that gets a [file](https://developer.mozilla.org/en-US/docs/DOM/File)\nand a `done` function as parameters.\n\nIf the done function is invoked without arguments, the file is \"accepted\" and will\nbe processed. If you pass an error message, the file is rejected, and the error\nmessage will be displayed.\nThis function will not be called if the file is too big or doesn't match the mime types."
+        },
+        "defaultValue": "function(_file, done) {\n    return done();\n  }"
+      },
+      "chunksUploaded": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The callback that will be invoked when all chunks have been uploaded for a file.\nIt gets the file for which the chunks have been uploaded as the first parameter,\nand the `done` function as second. `done()` needs to be invoked when everything\nneeded to finish the upload process is done."
+        },
+        "defaultValue": "function(_file, done) {\n    done();\n  }"
+      },
+      "hiddenInputContainer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLElement",
+          "resolved": "HTMLElement | string",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This is the element the hidden input field (which is used when clicking on the\ndropzone to trigger file selection) will be appended to. This might\nbe important in case you use frameworks to switch the content of your page.\n\nCan be a selector string, or an element directly."
+        },
+        "attribute": "hidden-input-container",
+        "reflect": false,
+        "defaultValue": "\"body\""
+      },
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhUploadLocalizedText",
+          "resolved": "StzhLocaleComponent & { description: string; button: string; cancelUpload: string; uploadCanceled: string; cancelUploadConfirmation: string; removeFile: string; maxFilesExceeded: string; serverError: string; accessError: string; responseError: string; invalidFileType: string; fileTooBig: string; fileTooBigServer: string; }",
+          "references": {
+            "StzhUploadLocalizedText": {
+              "location": "import",
+              "path": "./stzh-upload.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhFileAdded",
+        "name": "stzhFileAdded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "File added"
+        },
+        "complexType": {
+          "original": "StzhUploadFileAddedEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "references": {
+            "StzhUploadFileAddedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhFilesAdded",
+        "name": "stzhFilesAdded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Files added (multiple)"
+        },
+        "complexType": {
+          "original": "StzhUploadFilesAddedEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
+          "references": {
+            "StzhUploadFilesAddedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhFileRemoved",
+        "name": "stzhFileRemoved",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "File removed"
+        },
+        "complexType": {
+          "original": "StzhUploadFileRemovedEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "references": {
+            "StzhUploadFileRemovedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSending",
+        "name": "stzhSending",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Before sending file (add additional data before request if necessary)"
+        },
+        "complexType": {
+          "original": "StzhUploadSendingEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; xhr: XMLHttpRequest; formData: FormData; }",
+          "references": {
+            "StzhUploadSendingEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSendingMultiple",
+        "name": "stzhSendingMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Before sending multiple files (add additional data before request if necessary)"
+        },
+        "complexType": {
+          "original": "StzhUploadSendingMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; xhr: XMLHttpRequest; formData: FormData; }",
+          "references": {
+            "StzhUploadSendingMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhProcessing",
+        "name": "stzhProcessing",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Files starting to get processed"
+        },
+        "complexType": {
+          "original": "StzhUploadProcessingEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "references": {
+            "StzhUploadProcessingEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhProcessingMultiple",
+        "name": "stzhProcessingMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Files starting to get processed (multiple)"
+        },
+        "complexType": {
+          "original": "StzhUploadProcessingMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
+          "references": {
+            "StzhUploadProcessingMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhProgress",
+        "name": "stzhProgress",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Upload file progress during upload"
+        },
+        "complexType": {
+          "original": "StzhUploadProgressEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; progress: number; bytesSent: number; }",
+          "references": {
+            "StzhUploadProgressEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhProgressTotal",
+        "name": "stzhProgressTotal",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Upload total file progress during upload"
+        },
+        "complexType": {
+          "original": "StzhUploadProgressTotalEvent",
+          "resolved": "{ component: \"stzh-upload\"; totalUploadProgress: number; totalBytes: number; totalBytesSent: number; }",
+          "references": {
+            "StzhUploadProgressTotalEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhError",
+        "name": "stzhError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "File error"
+        },
+        "complexType": {
+          "original": "StzhUploadErrorEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; message: string; xhr: XMLHttpRequest; }",
+          "references": {
+            "StzhUploadErrorEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhErrorMultiple",
+        "name": "stzhErrorMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Files error (multiple files)"
+        },
+        "complexType": {
+          "original": "StzhUploadErrorMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; message: string; xhr: XMLHttpRequest; }",
+          "references": {
+            "StzhUploadErrorMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSuccess",
+        "name": "stzhSuccess",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "File successfully uploaded"
+        },
+        "complexType": {
+          "original": "StzhUploadSuccessEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; responseText: string; event: ProgressEvent<EventTarget>; }",
+          "references": {
+            "StzhUploadSuccessEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhSuccessMultiple",
+        "name": "stzhSuccessMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Files successfully uploaded (multiple files)"
+        },
+        "complexType": {
+          "original": "StzhUploadSuccessMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; responseText: string; event: ProgressEvent<EventTarget>; }",
+          "references": {
+            "StzhUploadSuccessMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhCanceled",
+        "name": "stzhCanceled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Canceled file upload"
+        },
+        "complexType": {
+          "original": "StzhUploadCanceledEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "references": {
+            "StzhUploadCanceledEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhCanceledMultiple",
+        "name": "stzhCanceledMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Canceled file upload (multiple files)"
+        },
+        "complexType": {
+          "original": "StzhUploadCanceledMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
+          "references": {
+            "StzhUploadCanceledMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhComplete",
+        "name": "stzhComplete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Completed upload (successfully or with error)"
+        },
+        "complexType": {
+          "original": "StzhUploadCompleteEvent",
+          "resolved": "{ component: \"stzh-upload\"; file: StzhUploadFile; }",
+          "references": {
+            "StzhUploadCompleteEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhCompleteMultiple",
+        "name": "stzhCompleteMultiple",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Completed upload (successfully or with error, multiple files)"
+        },
+        "complexType": {
+          "original": "StzhUploadCompleteMultipleEvent",
+          "resolved": "{ component: \"stzh-upload\"; files: StzhUploadFile[]; }",
+          "references": {
+            "StzhUploadCompleteMultipleEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "processQueue": {
+        "complexType": {
+          "signature": "() => Promise<any>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "existingFiles",
+        "methodName": "existingFilesWatcher"
+      }, {
+        "propName": "disabled",
+        "methodName": "disabledWatcher"
+      }, {
+        "propName": "error",
+        "methodName": "errorWatcher"
+      }];
+  }
+}