@liwe3/webcomponents 1.0.2 → 1.1.0

package/dist/ChunkUploader.js

@@ -0,0 +1,614 @@
+class v extends HTMLElement {
+  constructor() {
+    super(), this.files = /* @__PURE__ */ new Map(), this.config = {
+      serverURL: "",
+      chunkSize: 5,
+      maxFileSize: 5120
+    }, 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"];
+  }
+  attributeChangedCallback(e, r, o) {
+    if (r !== o)
+      switch (e) {
+        case "server-url":
+          this.config.serverURL = o || "";
+          break;
+        case "chunk-size":
+          this.config.chunkSize = parseFloat(o || String(5));
+          break;
+        case "auth-token":
+          this.config.authToken = o || void 0;
+          break;
+        case "valid-filetypes":
+          this.config.validFiletypes = o ? o.split(",").map((t) => t.trim()) : void 0;
+          break;
+        case "max-file-size":
+          this.config.maxFileSize = parseFloat(o || String(5120));
+          break;
+      }
+  }
+  // Property getters and setters
+  get serverURL() {
+    return this.config.serverURL;
+  }
+  set serverURL(e) {
+    this.config.serverURL = e, this.setAttribute("server-url", e);
+  }
+  get chunkSize() {
+    return this.config.chunkSize;
+  }
+  set chunkSize(e) {
+    this.config.chunkSize = e, this.setAttribute("chunk-size", e.toString());
+  }
+  get authToken() {
+    return this.config.authToken;
+  }
+  set authToken(e) {
+    e ? (this.config.authToken = e, this.setAttribute("auth-token", e)) : (this.config.authToken = void 0, this.removeAttribute("auth-token"));
+  }
+  get validFiletypes() {
+    return this.config.validFiletypes;
+  }
+  set validFiletypes(e) {
+    this.config.validFiletypes = e, e ? this.setAttribute("valid-filetypes", e.join(",")) : this.removeAttribute("valid-filetypes");
+  }
+  get maxFileSize() {
+    return this.config.maxFileSize || 5120;
+  }
+  set maxFileSize(e) {
+    this.config.maxFileSize = e, this.setAttribute("max-file-size", e.toString());
+  }
+  set onfilecomplete(e) {
+    this.config.onfilecomplete = e;
+  }
+  set onuploadcomplete(e) {
+    this.config.onuploadcomplete = e;
+  }
+  /**
+   * 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];
+  }
+  /**
+   * Generates a unique ID for a file
+   */
+  generateFileId() {
+    return `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+   * Validates a file based on config
+   */
+  validateFile(e) {
+    const r = this.maxFileSize * 1024 * 1024;
+    if (e.size > r)
+      return {
+        valid: !1,
+        error: `File size exceeds maximum of ${this.formatBytes(r)}`
+      };
+    if (this.config.validFiletypes && this.config.validFiletypes.length > 0) {
+      const o = e.name.split(".").pop()?.toLowerCase();
+      if (!o || !this.config.validFiletypes.includes(o))
+        return {
+          valid: !1,
+          error: `File type .${o} is not allowed. Valid types: ${this.config.validFiletypes.join(", ")}`
+        };
+    }
+    return { valid: !0 };
+  }
+  /**
+   * Generates a preview for image files
+   */
+  async generatePreview(e) {
+    if (e.type.startsWith("image/"))
+      return new Promise((r) => {
+        const o = new FileReader();
+        o.onload = (t) => r(t.target?.result), o.onerror = () => r(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",
+        progress: 0,
+        uploadedBytes: 0,
+        error: t.error
+      };
+      t.valid && o.type.startsWith("image/") && (s.preview = await this.generatePreview(o)), this.files.set(i, s);
+    }
+    this.renderFileCards();
+  }
+  /**
+   * Removes a file from the queue
+   */
+  removeFile(e) {
+    this.files.delete(e), this.renderFileCards();
+  }
+  /**
+   * Uploads a single file with chunking
+   */
+  async uploadFile(e) {
+    if (!this.config.serverURL)
+      throw new Error("Server URL is not configured");
+    const { file: r } = e;
+    e.status = "uploading", e.progress = 0, this.updateFileCard(e.id);
+    try {
+      const o = {
+        "Content-Type": "application/json"
+      };
+      this.config.authToken && (o.Authorization = `Bearer ${this.config.authToken}`);
+      const t = await fetch(`${this.config.serverURL}/api/upload/initiate`, {
+        method: "POST",
+        headers: o,
+        body: JSON.stringify({
+          fileName: r.name,
+          fileType: r.type
+        })
+      });
+      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 (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 = {
+          "Content-Type": "application/octet-stream",
+          "X-Upload-Id": i,
+          "X-Key": s,
+          "X-Part-Number": a.toString()
+        };
+        this.config.authToken && (h.Authorization = `Bearer ${this.config.authToken}`);
+        const u = await fetch(`${this.config.serverURL}/api/upload/part`, {
+          method: "POST",
+          headers: h,
+          body: g,
+          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 (!(await fetch(`${this.config.serverURL}/api/upload/complete`, {
+        method: "POST",
+        headers: o,
+        body: JSON.stringify({
+          uploadId: i,
+          key: s,
+          parts: d
+        })
+      })).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;
+    }
+  }
+  /**
+   * Starts uploading all pending files
+   */
+  async startUpload() {
+    if (this.isUploading) return;
+    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");
+    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()));
+    } 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");
+    }
+  }
+  /**
+   * Aborts all pending and uploading files
+   */
+  async abortAllUploads() {
+    this.abortController && this.abortController.abort();
+    const e = Array.from(this.files.values()).filter(
+      (i) => i.status === "pending" || i.status === "uploading"
+    );
+    if (e.length === 0) return;
+    const r = {
+      "Content-Type": "application/json"
+    };
+    this.config.authToken && (r.Authorization = `Bearer ${this.config.authToken}`);
+    for (const i of e) {
+      if (i.uploadId && i.key)
+        try {
+          await fetch(`${this.config.serverURL}/api/upload/abort`, {
+            method: "POST",
+            headers: r,
+            body: JSON.stringify({
+              uploadId: i.uploadId,
+              key: i.key
+            })
+          });
+        } catch (s) {
+          console.error(`Failed to abort upload for ${i.file.name}:`, s);
+        }
+      i.status = "aborted", i.error = "Upload aborted by user", this.updateFileCard(i.id);
+    }
+    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");
+  }
+  /**
+   * Updates a single file card in the DOM
+   */
+  updateFileCard(e) {
+    const r = this.files.get(e);
+    if (!r) 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");
+  }
+  /**
+   * Renders all file cards
+   */
+  renderFileCards() {
+    const e = this.shadowRoot.querySelector("#fileCardsContainer");
+    if (!e) return;
+    if (this.files.size === 0) {
+      e.innerHTML = "";
+      return;
+    }
+    e.innerHTML = Array.from(this.files.values()).map((t) => `
+      <div class="file-card" data-file-id="${t.id}">
+        <button class="remove-btn" data-file-id="${t.id}">×</button>
+        ${t.preview ? `<div class="preview"><img src="${t.preview}" alt="Preview"></div>` : '<div class="preview no-preview">📄</div>'}
+        <div class="file-info">
+          <div class="file-name" title="${t.file.name}">${t.file.name}</div>
+          <div class="file-size">${this.formatBytes(t.file.size)}</div>
+        </div>
+        <div class="progress-container">
+          <div class="progress-bar-bg">
+            <div class="progress-bar" style="width: ${t.progress}%; background-color: ${t.status === "completed" ? "#22c55e" : t.status === "error" ? "#ef4444" : "var(--color-primary)"}"></div>
+          </div>
+          <div class="progress-text">${Math.round(t.progress)}%</div>
+        </div>
+        ${t.error ? `<div class="status error">${t.error}</div>` : ""}
+      </div>
+    `).join(""), e.querySelectorAll(".remove-btn").forEach((t) => {
+      t.addEventListener("click", (i) => {
+        i.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");
+      o.style.display = t ? "block" : "none";
+    }
+  }
+  /**
+   * 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) => {
+      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());
+  }
+  /**
+   * Renders the component
+   */
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        .container {
+          width: 100%;
+        }
+
+        .upload-zone {
+          border: 2px dashed #ccc;
+          border-radius: 8px;
+          padding: 40px;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          background: #fafafa;
+        }
+
+        .upload-zone:hover {
+          border-color: #4CAF50;
+          background: #f0f9f0;
+        }
+
+        .upload-zone.drag-over {
+          border-color: #4CAF50;
+          background: #e8f5e9;
+        }
+
+        .upload-zone-content {
+          pointer-events: none;
+        }
+
+        .upload-icon {
+          font-size: 48px;
+          margin-bottom: 16px;
+        }
+
+        .upload-text {
+          font-size: 18px;
+          margin-bottom: 8px;
+          color: #333;
+        }
+
+        .upload-hint {
+          font-size: 14px;
+          color: #666;
+        }
+
+        .browse-btn {
+          background: #4CAF50;
+          color: white;
+          border: none;
+          padding: 12px 24px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 16px;
+          transition: background 0.3s ease;
+          pointer-events: auto;
+        }
+
+        .browse-btn:hover {
+          background: #45a049;
+        }
+
+        input[type="file"] {
+          display: none;
+        }
+
+        .file-cards-container {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 16px;
+          margin-top: 24px;
+        }
+
+        .file-card {
+          position: relative;
+          width: 200px;
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          padding: 12px;
+          background: white;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          transition: box-shadow 0.3s ease;
+        }
+
+        .file-card:hover {
+          box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+        }
+
+        .remove-btn {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          width: 24px;
+          height: 24px;
+          border: none;
+          border-radius: 50%;
+          background: rgba(239, 68, 68, 0.9);
+          color: white;
+          font-size: 18px;
+          line-height: 1;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          transition: background 0.3s ease;
+          z-index: 1;
+        }
+
+        .remove-btn:hover {
+          background: rgba(239, 68, 68, 1);
+        }
+
+        .preview {
+          width: 100%;
+          height: 120px;
+          border-radius: 4px;
+          overflow: hidden;
+          background: #f5f5f5;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 8px;
+        }
+
+        .preview img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .preview.no-preview {
+          font-size: 48px;
+        }
+
+        .file-info {
+          margin-bottom: 8px;
+        }
+
+        .file-name {
+          font-size: 14px;
+          font-weight: 500;
+          color: #333;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 4px;
+        }
+
+        .file-size {
+          font-size: 12px;
+          color: #666;
+        }
+
+        .progress-container {
+          margin-top: 8px;
+        }
+
+        .progress-bar-bg {
+          width: 100%;
+          height: 8px;
+          background: #e0e0e0;
+          border-radius: 4px;
+          overflow: hidden;
+          margin-bottom: 4px;
+        }
+
+        .progress-bar {
+          height: 100%;
+          background: var(--color-primary, #4CAF50);
+          transition: width 0.3s ease, background-color 0.3s ease;
+        }
+
+        .progress-text {
+          font-size: 12px;
+          color: #666;
+          text-align: center;
+        }
+
+        .status {
+          font-size: 12px;
+          color: #ef4444;
+          margin-top: 4px;
+          display: none;
+        }
+
+        .status.error {
+          display: block;
+        }
+
+        .upload-btn {
+          background: #4CAF50;
+          color: white;
+          border: none;
+          padding: 12px 32px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 24px;
+          transition: background 0.3s ease;
+          display: none;
+        }
+
+        .upload-btn:hover:not(:disabled) {
+          background: #45a049;
+        }
+
+        .upload-btn:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .abort-btn {
+          background: #ef4444;
+          color: white;
+          border: none;
+          padding: 12px 32px;
+          border-radius: 6px;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          margin-top: 24px;
+          margin-left: 12px;
+          transition: background 0.3s ease;
+          display: none;
+        }
+
+        .abort-btn:hover {
+          background: #dc2626;
+        }
+
+        .buttons-container {
+          display: flex;
+          align-items: center;
+        }
+      </style>
+
+      <div class="container">
+        <div class="upload-zone" id="uploadZone">
+          <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-hint">or</div>
+            <button class="browse-btn" id="browseBtn">Browse Files</button>
+          </div>
+        </div>
+
+        <div class="file-cards-container" id="fileCardsContainer"></div>
+
+        <div class="buttons-container">
+          <button class="upload-btn" id="uploadBtn">Upload Files</button>
+          <button class="abort-btn" id="abortBtn">Abort Upload</button>
+        </div>
+      </div>
+    `;
+  }
+}
+const m = (l = "liwe3-chunk-uploader") => {
+  typeof window < "u" && !customElements.get(l) && customElements.define(l, v);
+};
+typeof window < "u" && m();
+export {
+  v as ChunkUploaderElement,
+  m as defineChunkUploader
+};
+//# sourceMappingURL=ChunkUploader.js.map