wj-elements 0.1.101 → 0.1.102

package/dist/wje-dialog.js

@@ -6,13 +6,15 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement, { event } from "./wje-element.js";
 import "./wje-icon.js";
-const styles = '/*\r\n[ WJ Dialog ]\r\n*/\r\n\r\n:host {\r\n  .close {\r\n    margin-left: auto;\r\n  }\r\n\r\n  .modal-content {\r\n    border-radius: 3px;\r\n    box-shadow: none;\r\n  }\r\n\r\n  .dialog-header {\r\n    position: relative;\r\n    border-bottom: 0;\r\n    padding-inline: var(--wje-dialog-padding);\r\n    padding-top: var(--wje-dialog-padding);\r\n    padding-bottom: var(--wje-dialog-padding);\r\n    display: flex;\r\n    align-items: center;\r\n    span {\r\n      font-family: var(--wje-font-family-secondary);\r\n      font-size: 10.5px;\r\n      text-transform: uppercase;\r\n      display: inline-block;\r\n      letter-spacing: 0.06em;\r\n      font-weight: 500;\r\n      margin: 0;\r\n      padding: 0;\r\n      line-height: normal;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      filter: alpha(opacity=40);\r\n    }\r\n  }\r\n\r\n  .dialog-content {\r\n    box-shadow: none;\r\n    padding-inline: var(--wje-dialog-padding);\r\n    white-space: normal;\r\n    z-index: 1;\r\n  }\r\n\r\n  .dialog-footer {\r\n    display: flex;\r\n    justify-content: end;\r\n    border-top: none;\r\n    box-shadow: none;\r\n    margin-top: 0;\r\n    padding-inline: var(--wje-dialog-padding-inline);\r\n    padding-top: var(--wje-dialog-padding-top);\r\n    padding-bottom: var(--wje-dialog-padding-bottom);\r\n  }\r\n}\r\n\r\ndialog::backdrop {\r\n  opacity: var(--wje-backdrop-opacity);\r\n  background-color: var(--wje-backdrop);\r\n}\r\n\r\ndialog:focus-visible {\r\n  outline: none;\r\n}\r\n\r\n:host(.separator) .dialog-header:after {\r\n  content: "";\r\n  height: 1px;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  left: var(--wje-dialog-padding);\r\n  right: var(--wje-dialog-padding);\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n:host {\r\n  dialog {\r\n    box-sizing: border-box;\r\n    transition: all 0.2s !important;\r\n    width: var(--wje-dialog-width);\r\n    height: var(--wje-dialog-height);\r\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\r\n\r\n    border-radius: var(--wje-dialog-border-radius);\r\n    border-width: var(--wje-dialog-border-width);\r\n    border-style: var(--wje-dialog-border-style);\r\n    border-color: var(--wje-dialog-border-color);\r\n\r\n    margin-top: var(--wje-dialog-margin-top);\r\n\r\n    margin-bottom: var(--wje-dialog-margin-bottom);\r\n    margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\r\n\r\n    padding: 0;\r\n  }\r\n}\r\n\r\n/*Top*/\r\n:host(.stick-up) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: fit-content;\r\n  --wje-dialog-border-radius: 0 0 8px 8px;\r\n  --wje-dialog-border-width: 0 1px 1px 1px;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-translate-from: translateY(-110%);\r\n  --wje-dialog-template-to: translateX(0);\r\n}\r\n\r\n/*Cenetered*/\r\n:host(.slide-up) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: fit-content;\r\n  --wje-dialog-border-radius: 8px;\r\n  --wje-dialog-border-width: 1px;\r\n  --wje-dialog-opacity-from: 0;\r\n  --wje-dialog-translate-from: scale(.9);\r\n  --wje-dialog-translate-to: scale(1);\r\n}\r\n\r\n/*Fullscreen*/\r\n:host(.fill-in) {\r\n  --wje-dialog-width: 100%;\r\n  --wje-dialog-height: 100%;\r\n  --wje-dialog-border-radius: 0 0 0 0 !important;\r\n  --wje-dialog-border-width: 0;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: 0;\r\n  --wje-dialog-margin-end: 0;\r\n  --wje-dialog-margin-bottom: 0;\r\n  --wje-dialog-translate-from: scale(.95);\r\n  --wje-dialog-translate-to: scale(1);\r\n  dialog {\r\n    min-width: var(--wje-dialog-width);\r\n    min-height: var(--wje-dialog-height);\r\n  }\r\n}\r\n\r\n/*Slide Left*/\r\n:host(.slide-left) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: 100% !important;\r\n  --wje-dialog-border-radius: 0;\r\n  --wje-dialog-border-width: 0 1px 0 0;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: 0;\r\n  --wje-dialog-margin-end: auto;\r\n  --wje-dialog-margin-bottom: 0;\r\n  dialog {\r\n    min-height: var(--wje-dialog-height);\r\n    --wje-dialog-translate-from: translateX(-110%);\r\n    --wje-dialog-template-to: translateX(0);\r\n  }\r\n}\r\n\r\n/*Slide Right*/\r\n:host(.slide-right) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: 100% !important;\r\n  --wje-dialog-border-radius: 0;\r\n  --wje-dialog-border-width: 0 0 0 1px;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: auto;\r\n  --wje-dialog-margin-end: 0;\r\n  --wje-dialog-margin-bottom: 0;\r\n  dialog {\r\n    min-height: var(--wje-dialog-height);\r\n    --wje-dialog-translate-from: translateX(110%);\r\n    --wje-dialog-template-to: translateX(0);\r\n  }\r\n}\r\n\r\n:host(.small) {\r\n  --wje-dialog-width: 300px !important;\r\n}\r\n\r\n:host(.medium) {\r\n  --wje-dialog-width: 500px !important;\r\n}\r\n\r\n:host(.large) {\r\n  --wje-dialog-width: 600px !important;\r\n}\r\n\r\n:host(.ex-large) {\r\n  --wje-dialog-width: 900px !important;\r\n}\r\n\r\ndialog[open] {\r\n  animation: show .5s ease normal;\r\n}\r\n\r\n@keyframes show{\r\n  from {\r\n    opacity: var(--wje-dialog-opacity-from, 1);\r\n    transform: var(--wje-dialog-translate-from);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: var(--wje-dialog-translate-to);\r\n  }\r\n}';
+const styles = '/*\r\n[ WJ Dialog ]\r\n*/\r\n\r\n:host {\r\n  --wje-dialog-header-actions-gap: 0.5rem;\r\n  \r\n  .close {\r\n    margin-left: auto;\r\n  }\r\n\r\n  .header-actions {\r\n    margin-left: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--wje-dialog-header-actions-gap);\r\n  }\r\n\r\n  .modal-content {\r\n    border-radius: 3px;\r\n    box-shadow: none;\r\n  }\r\n\r\n  .dialog-header {\r\n    position: relative;\r\n    border-bottom: 0;\r\n    padding-inline: var(--wje-dialog-padding);\r\n    padding-top: var(--wje-dialog-padding);\r\n    padding-bottom: var(--wje-dialog-padding);\r\n    display: flex;\r\n    align-items: center;\r\n    span {\r\n      font-family: var(--wje-font-family-secondary);\r\n      font-size: 10.5px;\r\n      text-transform: uppercase;\r\n      display: inline-block;\r\n      letter-spacing: 0.06em;\r\n      font-weight: 500;\r\n      margin: 0;\r\n      padding: 0;\r\n      line-height: normal;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      filter: alpha(opacity=40);\r\n    }\r\n  }\r\n\r\n  .dialog-content {\r\n    box-shadow: none;\r\n    padding-inline: var(--wje-dialog-padding);\r\n    white-space: normal;\r\n    z-index: 1;\r\n  }\r\n\r\n  .dialog-footer {\r\n    display: flex;\r\n    justify-content: end;\r\n    border-top: none;\r\n    box-shadow: none;\r\n    margin-top: 0;\r\n    padding-inline: var(--wje-dialog-padding-inline);\r\n    padding-top: var(--wje-dialog-padding-top);\r\n    padding-bottom: var(--wje-dialog-padding-bottom);\r\n  }\r\n}\r\n\r\ndialog::backdrop {\r\n  opacity: var(--wje-backdrop-opacity);\r\n  background-color: var(--wje-backdrop);\r\n}\r\n\r\ndialog:focus-visible {\r\n  outline: none;\r\n}\r\n\r\n:host(.separator) .dialog-header:after {\r\n  content: "";\r\n  height: 1px;\r\n  background: rgba(0, 0, 0, 0.08);\r\n  left: var(--wje-dialog-padding);\r\n  right: var(--wje-dialog-padding);\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n:host {\r\n  dialog {\r\n    box-sizing: border-box;\r\n    transition: all 0.2s !important;\r\n    width: var(--wje-dialog-width);\r\n    height: var(--wje-dialog-height);\r\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\r\n\r\n    border-radius: var(--wje-dialog-border-radius);\r\n    border-width: var(--wje-dialog-border-width);\r\n    border-style: var(--wje-dialog-border-style);\r\n    border-color: var(--wje-dialog-border-color);\r\n\r\n    margin-top: var(--wje-dialog-margin-top);\r\n\r\n    margin-bottom: var(--wje-dialog-margin-bottom);\r\n    margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\r\n\r\n    padding: 0;\r\n  }\r\n}\r\n\r\n/*Top*/\r\n:host(.stick-up) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: fit-content;\r\n  --wje-dialog-border-radius: 0 0 8px 8px;\r\n  --wje-dialog-border-width: 0 1px 1px 1px;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-translate-from: translateY(-110%);\r\n  --wje-dialog-template-to: translateX(0);\r\n}\r\n\r\n/*Cenetered*/\r\n:host(.slide-up) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: fit-content;\r\n  --wje-dialog-border-radius: 8px;\r\n  --wje-dialog-border-width: 1px;\r\n  --wje-dialog-opacity-from: 0;\r\n  --wje-dialog-translate-from: scale(.9);\r\n  --wje-dialog-translate-to: scale(1);\r\n}\r\n\r\n/*Fullscreen*/\r\n:host(.fill-in) {\r\n  --wje-dialog-width: 100%;\r\n  --wje-dialog-height: 100%;\r\n  --wje-dialog-border-radius: 0 0 0 0 !important;\r\n  --wje-dialog-border-width: 0;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: 0;\r\n  --wje-dialog-margin-end: 0;\r\n  --wje-dialog-margin-bottom: 0;\r\n  --wje-dialog-translate-from: scale(.95);\r\n  --wje-dialog-translate-to: scale(1);\r\n  dialog {\r\n    min-width: var(--wje-dialog-width);\r\n    min-height: var(--wje-dialog-height);\r\n  }\r\n}\r\n\r\n/*Slide Left*/\r\n:host(.slide-left) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: 100% !important;\r\n  --wje-dialog-border-radius: 0;\r\n  --wje-dialog-border-width: 0 1px 0 0;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: 0;\r\n  --wje-dialog-margin-end: auto;\r\n  --wje-dialog-margin-bottom: 0;\r\n  dialog {\r\n    min-height: var(--wje-dialog-height);\r\n    --wje-dialog-translate-from: translateX(-110%);\r\n    --wje-dialog-template-to: translateX(0);\r\n  }\r\n}\r\n\r\n/*Slide Right*/\r\n:host(.slide-right) {\r\n  --wje-dialog-width: 300px !important;\r\n  --wje-dialog-height: 100% !important;\r\n  --wje-dialog-border-radius: 0;\r\n  --wje-dialog-border-width: 0 0 0 1px;\r\n  --wje-dialog-margin-top: 0;\r\n  --wje-dialog-margin-start: auto;\r\n  --wje-dialog-margin-end: 0;\r\n  --wje-dialog-margin-bottom: 0;\r\n  dialog {\r\n    min-height: var(--wje-dialog-height);\r\n    --wje-dialog-translate-from: translateX(110%);\r\n    --wje-dialog-template-to: translateX(0);\r\n  }\r\n}\r\n\r\n:host(.small) {\r\n  --wje-dialog-width: 300px !important;\r\n}\r\n\r\n:host(.medium) {\r\n  --wje-dialog-width: 500px !important;\r\n}\r\n\r\n:host(.large) {\r\n  --wje-dialog-width: 600px !important;\r\n}\r\n\r\n:host(.ex-large) {\r\n  --wje-dialog-width: 900px !important;\r\n}\r\n\r\ndialog[open] {\r\n  animation: show .5s ease normal;\r\n}\r\n\r\n@keyframes show{\r\n  from {\r\n    opacity: var(--wje-dialog-opacity-from, 1);\r\n    transform: var(--wje-dialog-translate-from);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: var(--wje-dialog-translate-to);\r\n  }\r\n}';
 class Dialog extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Dialog");
     __publicField(this, "onOpen", (e) => {
+      this.dialog.innerHTML = "";
       Promise.resolve(this.beforeOpen(this, e)).then((res) => {
+        this.htmlDialogBody(this.dialog);
         this.dialog.showModal();
         if (this.dialog.open) {
           Promise.resolve(this.afterOpen(this, e));
@@ -52,16 +54,19 @@ class Dialog extends WJElement {
   draw(context, store, params) {
     let fragment = document.createDocumentFragment();
     this.classList.add("fade", this.placement, params.size);
-    let slot = document.createElement("slot");
     let dialog = document.createElement("dialog");
     dialog.classList.add("modal-dialog");
+    fragment.appendChild(dialog);
+    this.dialog = dialog;
+    return fragment;
+  }
+  htmlDialogBody(dialog) {
     let icon = document.createElement("wje-icon");
     icon.setAttribute("name", "x");
     icon.setAttribute("slot", "icon-only");
     let close = document.createElement("wje-button");
     close.setAttribute("fill", "link");
     close.setAttribute("size", "small");
-    close.classList.add("close");
     close.addEventListener("click", () => {
       this.close();
     });
@@ -70,15 +75,20 @@ class Dialog extends WJElement {
     header.setAttribute("part", "header");
     header.classList.add("dialog-header");
     if (this.hasAttribute("headline"))
-      header.innerHTML = `<span part="headline">${this.headline}</span>`;
-    header.appendChild(close);
+      header.innerHTML = `<span part="headline">${this.getAttribute("headline")}</span>`;
     let slotHeader = document.createElement("slot");
     slotHeader.setAttribute("name", "header");
-    header.appendChild(slotHeader);
+    const headerActions = document.createElement("div");
+    headerActions.classList.add("header-actions");
+    headerActions.setAttribute("part", "header-actions");
+    headerActions.appendChild(slotHeader);
+    header.appendChild(headerActions);
+    header.appendChild(close);
+    let contentSlot = document.createElement("slot");
     let body = document.createElement("div");
     body.setAttribute("part", "body");
     body.classList.add("dialog-content");
-    body.appendChild(slot);
+    body.appendChild(contentSlot);
     let footer = document.createElement("div");
     footer.setAttribute("part", "footer");
     footer.classList.add("dialog-footer");
@@ -89,9 +99,6 @@ class Dialog extends WJElement {
     dialog.appendChild(header);
     dialog.appendChild(body);
     dialog.appendChild(footer);
-    fragment.appendChild(dialog);
-    this.dialog = dialog;
-    return fragment;
   }
   close() {
     this.onClose();

package/dist/wje-file-upload-item.js

@@ -67,7 +67,7 @@ class FileUploadItem extends WJElement {
     if (name === "uploaded" && this.drawingStatus === "AFTER") {
       this.uploadedEl.setAttribute("value", this.uploaded);
       let progress = +this.uploaded / +this.size * 100 || 0;
-      this.sliderEl.setAttribute("value", Math.round(progress, 0));
+      this.sliderEl.value = Math.round(progress, 0);
     }
   }
   /**

package/dist/wje-file-upload.js

@@ -84,43 +84,55 @@ function isValidFileType(file, acceptedFileTypes) {
   }
   return false;
 }
-function uploadFile(file, chunkSize, preview) {
-  let start = 0;
-  const progressArray = new Array(Math.ceil(file.size / chunkSize)).fill(0);
-  const readAndUploadChunk = (start2, end) => {
-    const reader = new FileReader();
-    const chunkIndex = start2 / chunkSize;
-    const chunk = file.slice(start2, end);
-    reader.onload = (e) => {
-      const xhr = new XMLHttpRequest();
-      xhr.open("POST", "/upload", true);
-      xhr.setRequestHeader("Content-Range", `${start2}-${end}/${file.size}`);
-      xhr.upload.onprogress = (event) => {
-        if (event.lengthComputable) {
-          const progress = event.loaded / event.total * 100;
-          progressArray[chunkIndex] = progress;
-          progressArray.reduce((a, b) => a + b, 0) / progressArray.length;
-        }
-      };
-      xhr.onload = () => {
-        if (xhr.status == 200 || xhr.status == 201) {
-          progressArray[chunkIndex] = 100;
-          start2 += chunkSize;
-          if (start2 < file.size) {
-            preview.setAttribute("uploaded", start2);
-            readAndUploadChunk(start2, Math.min(start2 + chunkSize, file.size));
-          } else {
-            preview.setAttribute("uploaded", start2);
+function upload(url, chunkSize = 1024 * 1024) {
+  return (file, preview) => uploadFileInChunks(url, chunkSize, file, preview);
+}
+async function uploadFileInChunks(url, chunkSize = 1024 * 1024, file, preview) {
+  let offset = 0;
+  const totalChunks = Math.ceil(file.size / chunkSize);
+  const partResponses = [];
+  while (offset < file.size) {
+    const chunk = file.slice(offset, offset + chunkSize);
+    const stream = new ReadableStream({
+      start(controller) {
+        const reader = chunk.stream().getReader();
+        let uploadedBytes = 0;
+        reader.read().then(function process({ done, value }) {
+          if (done) {
+            controller.close();
+            return;
           }
-        } else {
-          console.error("Error during upload: ", xhr.statusText);
-        }
-      };
-      xhr.send(e.target.result);
-    };
-    reader.readAsArrayBuffer(chunk);
-  };
-  readAndUploadChunk(start, Math.min(start + chunkSize, file.size));
+          uploadedBytes += value.byteLength;
+          const percentComplete = (offset + uploadedBytes) / file.size * 100;
+          console.log(`Upload Progress: ${percentComplete.toFixed(2)}%`);
+          preview.setAttribute("uploaded", offset + uploadedBytes);
+          controller.enqueue(value);
+          return reader.read().then(process);
+        });
+      }
+    });
+    const formData = new FormData();
+    formData.append("file", new Blob([stream]));
+    formData.append("chunkIndex", Math.floor(offset / chunkSize));
+    formData.append("totalChunks", totalChunks);
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        body: formData
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to upload chunk ${Math.floor(offset / chunkSize) + 1}: ${response.statusText}`);
+      }
+      console.log(`Chunk ${Math.floor(offset / chunkSize) + 1}/${totalChunks} uploaded successfully.`);
+      partResponses.push(response);
+    } catch (error) {
+      console.error("Error uploading chunk:", error);
+      break;
+    }
+    offset += chunkSize;
+  }
+  console.log("File upload complete!");
+  return partResponses.at(-1).json();
 }
 const styles = '/*\r\n[ WJ File Upload ]\r\n*/\r\n\r\n:host {\r\n    width: 100%;\r\n}\r\n\r\n.native-file-upload {\r\n    width: 100%;\r\n}\r\n\r\n.file-label {\r\n    background: var(--wje-color-contrast-0);\r\n    border: 1px dashed var(--wje-border-color);\r\n    border-radius: var(--wje-border-radius-medium);\r\n    align-items: center;\r\n    justify-content: center;\r\n    display: flex;\r\n    padding: 1rem;\r\n    margin-bottom: .5rem;\r\n    flex-direction: column;\r\n}\r\n\r\n.file-preview {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr 1fr;\r\n    grid-template-rows: auto auto auto;\r\n    gap: 0 0;\r\n    grid-template-areas:\r\n    "image name name"\r\n    "image size size"\r\n    "progress progress progress";\r\n}\r\n\r\n.file-image {\r\n    grid-area: image;\r\n    align-items: center;\r\n    display: flex;\r\n}\r\n\r\n.file-name {\r\n    grid-area: name;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.file-size {\r\n    grid-area: size;\r\n    display: flex;\r\n}\r\n\r\n.file-progress { grid-area: progress; }\r\n\r\nwje-icon {\r\n    margin-right: .25rem;\r\n}\r\n\r\nwje-img {\r\n    margin-right: .25rem;\r\n}\r\n\r\n.file-info > span {\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\nwje-slider {\r\n    flex-basis: 100%;\r\n    margin-top: .5rem;\r\n}\r\n\r\n::part(slider) {\r\n    &::-webkit-slider-thumb {\r\n        visibility: hidden;\r\n    }\r\n\r\n    &::-moz-range-thumb {\r\n        visibility: hidden;\r\n    }\r\n\r\n    &::-ms-thumb {\r\n        visibility: hidden;\r\n    }\r\n}\r\n\r\nwje-img {\r\n    width: 50px;\r\n    height: 50px;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: .25rem;\r\n    border: 1px solid var(--wje-border-color);\r\n    border-radius: var(--wje-border-radius-medium);\r\n}';
 class FileUpload extends WJElement {
@@ -160,6 +172,7 @@ class FileUpload extends WJElement {
       }
     });
     this.localizer = new Localizer(this);
+    this._uploadedFiles = [];
   }
   /**
    * Setter for acceptedTypes attribute.
@@ -206,6 +219,28 @@ class FileUpload extends WJElement {
     const fileSize = this.getAttribute("max-file-size");
     return this.hasAttribute("max-file-size") ? fileSize * 1024 * 1024 : 1024 * 1024;
   }
+  /**
+   * Sets the upload URL for the file upload element.
+   *
+   * @param {string} value - The URL to set as the upload URL.
+   */
+  set uploadUrl(value) {
+    this.setAttribute("upload-url", value);
+  }
+  /**
+   * Retrieves the upload URL for the file upload element.
+   * 
+   * @returns {string} The upload URL.
+   */
+  get uploadUrl() {
+    return this.getAttribute("upload-url") ?? "/upload";
+  }
+  set uploadedFiles(value) {
+    this._uploadedFiles = value;
+  }
+  get uploadedFiles() {
+    return this._uploadedFiles;
+  }
   /**
    * Getter for cssStyleSheet.
    * @returns {string} The CSS styles for the component.
@@ -226,6 +261,9 @@ class FileUpload extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  beforeDraw() {
+    this.uploadFunction = upload(this.uploadUrl, this.chunkSize);
+  }
   /**
    * Method to draw the component.
    * @param {Object} context - The context of the component.
@@ -323,7 +361,9 @@ class FileUpload extends WJElement {
       reader.onload = (e) => {
         preview = this.createPreview(file, reader);
         this.fileList.appendChild(preview);
-        uploadFile(file, this.chunkSize, preview);
+        this.uploadFunction(file, preview).then((res) => {
+          this.uploadedFiles.push(res);
+        });
       };
       reader.readAsDataURL(file);
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.101",
+  "version": "0.1.102",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",