@liwe3/webcomponents 1.1.0 → 1.1.10

package/dist/ChunkUploader.js

@@ -1,4 +1,4 @@
-class v extends HTMLElement {
+class k extends HTMLElement {
   constructor() {
     super(), this.files = /* @__PURE__ */ new Map(), this.config = {
       serverURL: "",
@@ -7,10 +7,10 @@ class v extends HTMLElement {
     }, this.isUploading = !1, this.abortController = null, this.attachShadow({ mode: "open" }), this.render(), this.bindEvents();
   }
   static get observedAttributes() {
-    return ["server-url", "chunk-size", "auth-token", "valid-filetypes", "max-file-size"];
+    return ["server-url", "chunk-size", "auth-token", "valid-filetypes", "max-file-size", "label-drop-files", "label-browse", "folder", "compact"];
   }
-  attributeChangedCallback(e, r, o) {
-    if (r !== o)
+  attributeChangedCallback(e, i, o) {
+    if (i !== o)
       switch (e) {
         case "server-url":
           this.config.serverURL = o || "";
@@ -27,6 +27,18 @@ class v extends HTMLElement {
         case "max-file-size":
           this.config.maxFileSize = parseFloat(o || String(5120));
           break;
+        case "label-drop-files":
+          this.config.labelDropFiles = o || void 0, this.updateLabels();
+          break;
+        case "label-browse":
+          this.config.labelBrowse = o || void 0, this.updateLabels();
+          break;
+        case "folder":
+          this.config.folder = o || void 0;
+          break;
+        case "compact":
+          this.config.compact = o !== null, this.updateCompactMode();
+          break;
       }
   }
   // Property getters and setters
@@ -60,19 +72,60 @@ class v extends HTMLElement {
   set maxFileSize(e) {
     this.config.maxFileSize = e, this.setAttribute("max-file-size", e.toString());
   }
+  get labelDropFiles() {
+    return this.config.labelDropFiles;
+  }
+  set labelDropFiles(e) {
+    this.config.labelDropFiles = e, e ? this.setAttribute("label-drop-files", e) : this.removeAttribute("label-drop-files"), this.updateLabels();
+  }
+  get labelBrowse() {
+    return this.config.labelBrowse;
+  }
+  set labelBrowse(e) {
+    this.config.labelBrowse = e, e ? this.setAttribute("label-browse", e) : this.removeAttribute("label-browse"), this.updateLabels();
+  }
+  get folder() {
+    return this.config.folder;
+  }
+  set folder(e) {
+    this.config.folder = e, e ? this.setAttribute("folder", e) : this.removeAttribute("folder");
+  }
+  get compact() {
+    return !!this.config.compact;
+  }
+  set compact(e) {
+    this.config.compact = e, e ? this.setAttribute("compact", "") : this.removeAttribute("compact"), this.updateCompactMode();
+  }
   set onfilecomplete(e) {
     this.config.onfilecomplete = e;
   }
   set onuploadcomplete(e) {
     this.config.onuploadcomplete = e;
   }
+  set parseResponse(e) {
+    this.config.parseResponse = e;
+  }
+  /**
+   * Updates labels in the DOM when properties change
+   */
+  updateLabels() {
+    const e = this.shadowRoot.querySelector(".upload-text"), i = this.shadowRoot.querySelector("#browseBtn");
+    e && (e.textContent = this.config.labelDropFiles || "Drop files here"), i && (i.textContent = this.config.labelBrowse || "Browse Files");
+  }
+  /**
+   * Updates compact mode styles and attributes
+   */
+  updateCompactMode() {
+    const e = this.shadowRoot.querySelector(".container"), i = this.shadowRoot.querySelector("#fileInput");
+    this.config.compact ? (e?.classList.add("compact"), i?.removeAttribute("multiple")) : (e?.classList.remove("compact"), i?.setAttribute("multiple", ""));
+  }
   /**
    * Formats bytes to human readable string
    */
   formatBytes(e) {
     if (e === 0) return "0 Bytes";
-    const r = 1024, o = ["Bytes", "KB", "MB", "GB"], t = Math.floor(Math.log(e) / Math.log(r));
-    return Math.round(e / Math.pow(r, t) * 100) / 100 + " " + o[t];
+    const i = 1024, o = ["Bytes", "KB", "MB", "GB"], t = Math.floor(Math.log(e) / Math.log(i));
+    return Math.round(e / Math.pow(i, t) * 100) / 100 + " " + o[t];
   }
   /**
    * Generates a unique ID for a file
@@ -84,11 +137,11 @@ class v extends HTMLElement {
    * Validates a file based on config
    */
   validateFile(e) {
-    const r = this.maxFileSize * 1024 * 1024;
-    if (e.size > r)
+    const i = this.maxFileSize * 1024 * 1024;
+    if (e.size > i)
       return {
         valid: !1,
-        error: `File size exceeds maximum of ${this.formatBytes(r)}`
+        error: `File size exceeds maximum of ${this.formatBytes(i)}`
       };
     if (this.config.validFiletypes && this.config.validFiletypes.length > 0) {
       const o = e.name.split(".").pop()?.toLowerCase();
@@ -105,25 +158,28 @@ class v extends HTMLElement {
    */
   async generatePreview(e) {
     if (e.type.startsWith("image/"))
-      return new Promise((r) => {
+      return new Promise((i) => {
         const o = new FileReader();
-        o.onload = (t) => r(t.target?.result), o.onerror = () => r(void 0), o.readAsDataURL(e);
+        o.onload = (t) => i(t.target?.result), o.onerror = () => i(void 0), o.readAsDataURL(e);
       });
   }
   /**
    * Adds files to the upload queue
    */
   async addFiles(e) {
-    for (let r = 0; r < e.length; r++) {
-      const o = e[r], t = this.validateFile(o), i = this.generateFileId(), s = {
-        id: i,
-        file: o,
-        status: t.valid ? "pending" : "error",
+    this.config.compact && this.files.clear();
+    const i = Array.from(e), o = this.config.compact ? [i[0]] : i;
+    for (const t of o) {
+      if (!t) continue;
+      const r = this.validateFile(t), s = this.generateFileId(), a = {
+        id: s,
+        file: t,
+        status: r.valid ? "pending" : "error",
         progress: 0,
         uploadedBytes: 0,
-        error: t.error
+        error: r.error
       };
-      t.valid && o.type.startsWith("image/") && (s.preview = await this.generatePreview(o)), this.files.set(i, s);
+      r.valid && t.type.startsWith("image/") && (a.preview = await this.generatePreview(t)), this.files.set(s, a);
     }
     this.renderFileCards();
   }
@@ -139,64 +195,78 @@ class v extends HTMLElement {
   async uploadFile(e) {
     if (!this.config.serverURL)
       throw new Error("Server URL is not configured");
-    const { file: r } = e;
+    const i = this.config.serverURL.replace(/\/$/, ""), { file: o } = e;
     e.status = "uploading", e.progress = 0, this.updateFileCard(e.id);
     try {
-      const o = {
+      const t = {
         "Content-Type": "application/json"
       };
-      this.config.authToken && (o.Authorization = `Bearer ${this.config.authToken}`);
-      const t = await fetch(`${this.config.serverURL}/api/upload/initiate`, {
+      this.config.authToken && (t.Authorization = `Bearer ${this.config.authToken}`);
+      const r = await fetch(`${i}/api/upload/initiate`, {
         method: "POST",
-        headers: o,
+        mode: "cors",
+        headers: t,
         body: JSON.stringify({
-          fileName: r.name,
-          fileType: r.type
-        })
+          fileName: o.name,
+          fileType: o.type,
+          folder: this.config.folder
+        }),
+        signal: this.abortController?.signal
       });
-      if (!t.ok)
-        throw new Error(`Failed to initiate upload: ${await t.text()}`);
-      const { uploadId: i, key: s } = await t.json();
-      e.uploadId = i, e.key = s;
-      const n = this.config.chunkSize * 1024 * 1024, f = Math.ceil(r.size / n), d = [];
-      for (let a = 1; a <= f; a++) {
+      if (!r.ok)
+        throw new Error(`Failed to initiate upload: ${await r.text()}`);
+      let s = await r.json();
+      this.config.parseResponse && (s = this.config.parseResponse(s, "initiate"));
+      const { uploadId: a, key: d } = s;
+      e.uploadId = a, e.key = d;
+      const c = this.config.chunkSize * 1024 * 1024, y = Math.ceil(o.size / c), f = [];
+      for (let n = 1; n <= y; n++) {
         if (this.abortController?.signal.aborted)
           throw new Error("Upload aborted by user");
-        const c = (a - 1) * n, p = Math.min(c + n, r.size), g = r.slice(c, p), h = {
+        const g = (n - 1) * c, b = Math.min(g + c, o.size), x = o.slice(g, b), m = {
           "Content-Type": "application/octet-stream",
-          "X-Upload-Id": i,
-          "X-Key": s,
-          "X-Part-Number": a.toString()
+          "X-Upload-Id": a,
+          "X-Key": d,
+          "X-Part-Number": n.toString()
         };
-        this.config.authToken && (h.Authorization = `Bearer ${this.config.authToken}`);
-        const u = await fetch(`${this.config.serverURL}/api/upload/part`, {
+        this.config.authToken && (m.Authorization = `Bearer ${this.config.authToken}`);
+        const v = await fetch(`${i}/api/upload/part`, {
           method: "POST",
-          headers: h,
-          body: g,
+          mode: "cors",
+          headers: m,
+          body: x,
           signal: this.abortController?.signal
         });
-        if (!u.ok)
-          throw new Error(`Failed to upload part ${a}`);
-        const { etag: b } = await u.json();
-        d.push({ partNumber: a, etag: b }), e.uploadedBytes = p, e.progress = e.uploadedBytes / r.size * 100, this.updateFileCard(e.id);
+        if (!v.ok)
+          throw new Error(`Failed to upload part ${n}`);
+        let p = await v.json();
+        this.config.parseResponse && (p = this.config.parseResponse(p, "part"));
+        const { etag: w } = p;
+        f.push({ partNumber: n, etag: w }), e.uploadedBytes = b, e.progress = e.uploadedBytes / o.size * 100, this.updateFileCard(e.id);
       }
-      if (!(await fetch(`${this.config.serverURL}/api/upload/complete`, {
+      const h = await fetch(`${i}/api/upload/complete`, {
         method: "POST",
-        headers: o,
+        mode: "cors",
+        headers: t,
         body: JSON.stringify({
-          uploadId: i,
-          key: s,
-          parts: d
-        })
-      })).ok)
+          uploadId: a,
+          key: d,
+          parts: f
+        }),
+        signal: this.abortController?.signal
+      });
+      if (!h.ok)
         throw new Error("Failed to complete upload");
-      e.status = "completed", e.progress = 100, this.updateFileCard(e.id), this.dispatchEvent(new CustomEvent("filecomplete", {
-        detail: e,
-        bubbles: !0,
-        composed: !0
-      })), this.config.onfilecomplete && this.config.onfilecomplete(e);
-    } catch (o) {
-      throw o instanceof Error && (o.name === "AbortError" || o.message === "Upload aborted by user") || (e.status = "error", e.error = o instanceof Error ? o.message : "Unknown error", this.updateFileCard(e.id)), o;
+      let u = await h.json();
+      this.config.parseResponse && (u = this.config.parseResponse(u, "complete")), e.status = "completed", e.progress = 100, this.updateFileCard(e.id), this.dispatchEvent(
+        new CustomEvent("filecomplete", {
+          detail: e,
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.config.onfilecomplete && this.config.onfilecomplete(e);
+    } catch (t) {
+      throw t instanceof Error && (t.name === "AbortError" || t.message === "Upload aborted by user") || (e.status = "error", e.error = t instanceof Error ? t.message : "Unknown error", this.updateFileCard(e.id)), t;
     }
   }
   /**
@@ -207,23 +277,25 @@ class v extends HTMLElement {
     const e = Array.from(this.files.values()).filter((t) => t.status === "pending");
     if (e.length === 0) return;
     this.isUploading = !0, this.abortController = new AbortController();
-    const r = this.shadowRoot.querySelector("#uploadBtn"), o = this.shadowRoot.querySelector("#abortBtn");
-    r && (r.disabled = !0, r.textContent = "Uploading..."), o && (o.style.display = "inline-block");
+    const i = this.shadowRoot.querySelector("#uploadBtn"), o = this.shadowRoot.querySelector("#abortBtn");
+    i && (i.disabled = !0, i.textContent = "Uploading..."), o && (o.style.display = "inline-block");
     try {
       for (const t of e) {
         if (this.abortController.signal.aborted)
           break;
         await this.uploadFile(t);
       }
-      this.dispatchEvent(new CustomEvent("uploadcomplete", {
-        detail: Array.from(this.files.values()),
-        bubbles: !0,
-        composed: !0
-      })), this.config.onuploadcomplete && this.config.onuploadcomplete(Array.from(this.files.values()));
+      this.dispatchEvent(
+        new CustomEvent("uploadcomplete", {
+          detail: Array.from(this.files.values()),
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.config.onuploadcomplete && this.config.onuploadcomplete(Array.from(this.files.values()));
     } catch (t) {
       t instanceof Error && t.message !== "Upload aborted by user" && console.error("Upload error:", t);
     } finally {
-      this.isUploading = !1, r && (r.disabled = !1, r.textContent = "Upload Files"), o && (o.style.display = "none");
+      this.isUploading = !1, i && (i.disabled = !1, i.textContent = "Upload Files"), o && (o.style.display = "none");
     }
   }
   /**
@@ -232,34 +304,38 @@ class v extends HTMLElement {
   async abortAllUploads() {
     this.abortController && this.abortController.abort();
     const e = Array.from(this.files.values()).filter(
-      (i) => i.status === "pending" || i.status === "uploading"
+      (r) => r.status === "pending" || r.status === "uploading"
     );
     if (e.length === 0) return;
-    const r = {
+    const i = {
       "Content-Type": "application/json"
     };
-    this.config.authToken && (r.Authorization = `Bearer ${this.config.authToken}`);
-    for (const i of e) {
-      if (i.uploadId && i.key)
+    this.config.authToken && (i.Authorization = `Bearer ${this.config.authToken}`);
+    for (const r of e) {
+      if (r.uploadId && r.key)
         try {
-          await fetch(`${this.config.serverURL}/api/upload/abort`, {
+          const s = this.config.serverURL.replace(/\/$/, "");
+          await fetch(`${s}/api/upload/abort`, {
             method: "POST",
-            headers: r,
+            mode: "cors",
+            headers: i,
             body: JSON.stringify({
-              uploadId: i.uploadId,
-              key: i.key
+              uploadId: r.uploadId,
+              key: r.key
             })
           });
         } catch (s) {
-          console.error(`Failed to abort upload for ${i.file.name}:`, s);
+          console.error(`Failed to abort upload for ${r.file.name}:`, s);
         }
-      i.status = "aborted", i.error = "Upload aborted by user", this.updateFileCard(i.id);
+      r.status = "aborted", r.error = "Upload aborted by user", this.updateFileCard(r.id);
     }
-    this.dispatchEvent(new CustomEvent("uploadaborted", {
-      detail: e,
-      bubbles: !0,
-      composed: !0
-    })), this.isUploading = !1;
+    this.dispatchEvent(
+      new CustomEvent("uploadaborted", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.isUploading = !1;
     const o = this.shadowRoot.querySelector("#uploadBtn"), t = this.shadowRoot.querySelector("#abortBtn");
     o && (o.disabled = !1, o.textContent = "Upload Files"), t && (t.style.display = "none");
   }
@@ -267,12 +343,12 @@ class v extends HTMLElement {
    * Updates a single file card in the DOM
    */
   updateFileCard(e) {
-    const r = this.files.get(e);
-    if (!r) return;
+    const i = this.files.get(e);
+    if (!i) return;
     const o = this.shadowRoot.querySelector(`[data-file-id="${e}"]`);
     if (!o) return;
-    const t = o.querySelector(".progress-bar"), i = o.querySelector(".progress-text"), s = o.querySelector(".status");
-    t && (t.style.width = `${r.progress}%`, r.status === "completed" ? t.style.backgroundColor = "#22c55e" : r.status === "error" ? t.style.backgroundColor = "#ef4444" : r.status === "aborted" ? t.style.backgroundColor = "#f59e0b" : t.style.backgroundColor = "var(--color-primary)"), i && (i.textContent = `${Math.round(r.progress)}%`), s && r.error && (s.textContent = r.error, s.style.display = "block");
+    const t = o.querySelector(".progress-bar"), r = o.querySelector(".progress-text"), s = o.querySelector(".status");
+    t && (t.style.width = `${i.progress}%`, i.status === "completed" ? t.style.backgroundColor = "#22c55e" : i.status === "error" ? t.style.backgroundColor = "#ef4444" : i.status === "aborted" ? t.style.backgroundColor = "#f59e0b" : t.style.backgroundColor = "var(--color-primary)"), r && (r.textContent = `${Math.round(i.progress)}%`), s && i.error && (s.textContent = i.error, s.style.display = "block");
   }
   /**
    * Renders all file cards
@@ -301,15 +377,15 @@ class v extends HTMLElement {
         ${t.error ? `<div class="status error">${t.error}</div>` : ""}
       </div>
     `).join(""), e.querySelectorAll(".remove-btn").forEach((t) => {
-      t.addEventListener("click", (i) => {
-        i.stopPropagation();
+      t.addEventListener("click", (r) => {
+        r.stopPropagation();
         const s = t.dataset.fileId;
         s && this.removeFile(s);
       });
     });
     const o = this.shadowRoot.querySelector("#uploadBtn");
     if (o) {
-      const t = Array.from(this.files.values()).some((i) => i.status === "pending");
+      const t = Array.from(this.files.values()).some((r) => r.status === "pending");
       o.style.display = t ? "block" : "none";
     }
   }
@@ -317,17 +393,17 @@ class v extends HTMLElement {
    * Binds event listeners
    */
   bindEvents() {
-    const e = this.shadowRoot.querySelector("#uploadZone"), r = this.shadowRoot.querySelector("#fileInput"), o = this.shadowRoot.querySelector("#browseBtn"), t = this.shadowRoot.querySelector("#uploadBtn"), i = this.shadowRoot.querySelector("#abortBtn");
-    o?.addEventListener("click", () => r?.click()), e?.addEventListener("dragover", (s) => {
+    const e = this.shadowRoot.querySelector("#uploadZone"), i = this.shadowRoot.querySelector("#fileInput"), o = this.shadowRoot.querySelector("#browseBtn"), t = this.shadowRoot.querySelector("#uploadBtn"), r = this.shadowRoot.querySelector("#abortBtn");
+    o?.addEventListener("click", () => i?.click()), e?.addEventListener("dragover", (s) => {
       s.preventDefault(), e.classList.add("drag-over");
     }), e?.addEventListener("dragleave", () => {
       e.classList.remove("drag-over");
     }), e?.addEventListener("drop", (s) => {
       s.preventDefault(), e.classList.remove("drag-over"), s.dataTransfer?.files && this.addFiles(s.dataTransfer.files);
-    }), r?.addEventListener("change", (s) => {
-      const n = s.target.files;
-      n && (this.addFiles(n), r.value = "");
-    }), t?.addEventListener("click", () => this.startUpload()), i?.addEventListener("click", () => this.abortAllUploads());
+    }), i?.addEventListener("change", (s) => {
+      const a = s.target.files;
+      a && (this.addFiles(a), i.value = "");
+    }), t?.addEventListener("click", () => this.startUpload()), r?.addEventListener("click", () => this.abortAllUploads());
   }
   /**
    * Renders the component
@@ -351,7 +427,7 @@ class v extends HTMLElement {
         .upload-zone {
           border: 2px dashed #ccc;
           border-radius: 8px;
-          padding: 40px;
+          padding: 10px;
           text-align: center;
           cursor: pointer;
           transition: all 0.3s ease;
@@ -580,6 +656,72 @@ class v extends HTMLElement {
           display: flex;
           align-items: center;
         }
+
+        /* Compact Mode Styles */
+        .container.compact .upload-zone {
+          padding: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .container.compact .upload-icon,
+        .container.compact .upload-hint {
+          display: none;
+        }
+
+        .container.compact .upload-text {
+          font-size: 14px;
+          margin-bottom: 0;
+        }
+
+        .container.compact .browse-btn {
+          margin-top: 0;
+          padding: 6px 12px;
+          font-size: 14px;
+        }
+
+        .container.compact .file-cards-container {
+          margin-top: 12px;
+        }
+
+        .container.compact .file-card {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          padding: 8px;
+          height: auto;
+        }
+
+        .container.compact .preview {
+          display: none !important;
+        }
+
+        .container.compact .file-info {
+          margin-bottom: 0;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          flex: 0 0 auto;
+        }
+
+        .container.compact .file-name {
+          margin-bottom: 0;
+          max-width: 150px;
+        }
+
+        .container.compact .progress-container {
+          margin-top: 0;
+          flex: 1;
+          margin-left: 12px;
+          margin-right: 32px;
+        }
+
+        .container.compact .remove-btn {
+          top: 50%;
+          transform: translateY(-50%);
+        }
       </style>
 
       <div class="container">
@@ -587,9 +729,9 @@ class v extends HTMLElement {
           <input type="file" id="fileInput" multiple>
           <div class="upload-zone-content">
             <div class="upload-icon">📁</div>
-            <div class="upload-text">Drop files here</div>
+            <div class="upload-text">${this.config.labelDropFiles || "Drop files here"}</div>
             <div class="upload-hint">or</div>
-            <button class="browse-btn" id="browseBtn">Browse Files</button>
+            <button class="browse-btn" id="browseBtn">${this.config.labelBrowse || "Browse Files"}</button>
           </div>
         </div>
 
@@ -603,12 +745,12 @@ class v extends HTMLElement {
     `;
   }
 }
-const m = (l = "liwe3-chunk-uploader") => {
-  typeof window < "u" && !customElements.get(l) && customElements.define(l, v);
+const S = (l = "liwe3-chunk-uploader") => {
+  typeof window < "u" && !customElements.get(l) && customElements.define(l, k);
 };
-typeof window < "u" && m();
+typeof window < "u" && S();
 export {
-  v as ChunkUploaderElement,
-  m as defineChunkUploader
+  k as ChunkUploaderElement,
+  S as defineChunkUploader
 };
 //# sourceMappingURL=ChunkUploader.js.map