@sparkstudio/storage-ui 1.0.13 → 1.0.14

package/dist/index.js

@@ -182,6 +182,7 @@ var ContainerDTO = class {
   ContainerType;
   Name;
   ContentType;
+  PublicUrl;
   CreatedDate;
   FileSize;
   UserId;
@@ -191,6 +192,7 @@ var ContainerDTO = class {
     this.ContainerType = init.ContainerType;
     this.Name = init.Name;
     this.ContentType = init.ContentType;
+    this.PublicUrl = init.PublicUrl;
     this.CreatedDate = init.CreatedDate;
     this.FileSize = init.FileSize;
     this.UserId = init.UserId;
@@ -210,101 +212,72 @@ var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
 import "react";
 
 // src/components/UploadContainer.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/components/UploadDropzone.tsx
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var UploadDropzone = ({
   isDragging,
   onDragOver,
   onDragLeave,
-  onDrop
+  onDrop,
+  className = "",
+  style,
+  children
 }) => {
-  return /* @__PURE__ */ jsxs(
+  const baseClass = "border rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
+  const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
+  const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (onDragOver) onDragOver(e);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    if (onDragLeave) onDragLeave(e);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (onDrop) onDrop(e);
+  };
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "border rounded-3 p-4 text-center mb-3 d-flex flex-column align-items-center justify-content-center " + (isDragging ? "bg-light border-primary" : "border-secondary border-dashed"),
-      style: { cursor: "pointer", minHeight: "140px" },
-      onDragOver,
-      onDragLeave,
-      onDrop,
-      children: [
-        /* @__PURE__ */ jsx("i", { className: "bi bi-cloud-arrow-up fs-1 mb-2" }),
-        /* @__PURE__ */ jsx("p", { className: "mb-2", children: "Drop files here" }),
-        /* @__PURE__ */ jsx("small", { className: "text-muted", children: "or click the button below" })
-      ]
+      className: combinedClassName,
+      style: { minHeight: "140px", ...style },
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children
     }
   );
 };
 
-// src/components/UploadFilePicker.tsx
-import "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var UploadFilePicker = ({
-  multiple,
-  accept,
-  fileNames,
-  onFileChange
-}) => {
-  return /* @__PURE__ */ jsxs2("div", { className: "d-flex gap-2 align-items-center", children: [
-    /* @__PURE__ */ jsxs2("label", { className: "btn btn-primary mb-0", children: [
-      /* @__PURE__ */ jsx2("i", { className: "bi bi-folder2-open me-2" }),
-      "Browse files",
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "file",
-          className: "d-none",
-          multiple,
-          accept,
-          onChange: onFileChange
-        }
-      )
-    ] }),
-    fileNames.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "flex-grow-1", children: [
-      /* @__PURE__ */ jsx2("div", { className: "small text-muted", children: "Selected:" }),
-      /* @__PURE__ */ jsx2("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ jsx2("li", { children: name }, name)) })
-    ] })
-  ] });
-};
-
-// src/components/UploadProgressList.tsx
-import "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var UploadProgressList = ({
-  uploads
-}) => {
-  if (uploads.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ jsxs3("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "d-flex justify-content-between small mb-1", children: [
-      /* @__PURE__ */ jsxs3("span", { children: [
-        u.file.name,
-        " - ",
-        u?.publicUrl ?? ""
-      ] }),
-      /* @__PURE__ */ jsx3("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
-        role: "progressbar",
-        style: { width: `${u.progress}%` },
-        "aria-valuenow": u.progress,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100
-      }
-    ) }),
-    u.status === "error" && /* @__PURE__ */ jsx3("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
-  ] }, u.id)) });
-};
-
 // src/hooks/UseUploadManager.ts
 import { useState, useCallback } from "react";
 
 // src/engines/UploadFileToS3.ts
-async function UploadFileToS3(file, presignedUrl, onProgress) {
+async function UploadFileToS3(file, presignedUrl, onProgress, maxRetries = 3) {
+  let attempt = 0;
+  while (true) {
+    try {
+      await uploadOnce(file, presignedUrl, onProgress);
+      return;
+    } catch (err) {
+      if (attempt >= maxRetries) {
+        throw new Error(
+          `Upload failed after ${attempt + 1} attempts: ${err.message}`
+        );
+      }
+      attempt++;
+      const delay = 300 * attempt;
+      await new Promise((res) => setTimeout(res, delay));
+      console.warn(`Retrying upload (attempt ${attempt + 1})...`);
+    }
+  }
+}
+async function uploadOnce(file, presignedUrl, onProgress) {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
     xhr.open("PUT", presignedUrl);
@@ -319,15 +292,11 @@ async function UploadFileToS3(file, presignedUrl, onProgress) {
         resolve();
       } else {
         reject(
-          new Error(
-            `S3 upload failed with status ${xhr.status}: ${xhr.statusText}`
-          )
+          new Error(`S3 upload failed: ${xhr.status} ${xhr.statusText}`)
         );
       }
     };
-    xhr.onerror = () => {
-      reject(new Error("Network error while uploading to S3"));
-    };
+    xhr.onerror = () => reject(new Error("Network error while uploading to S3"));
     xhr.setRequestHeader(
       "Content-Type",
       file.type || "application/octet-stream"
@@ -361,9 +330,7 @@ function UseUploadManager({
         if (!getPresignedUrl) {
           throw new Error("getPresignedUrl is not provided.");
         }
-        const presignedUrl = await getPresignedUrl(
-          upload.file
-        );
+        const presignedUrl = await getPresignedUrlWithRetry(upload.file, 10);
         const url = presignedUrl?.PresignedUrl ?? "";
         await UploadFileToS3(upload.file, url, (progress) => {
           setUploads(
@@ -404,6 +371,20 @@ function UseUploadManager({
     },
     [getPresignedUrl, onUploadComplete, onUploadError]
   );
+  async function getPresignedUrlWithRetry(file, attempts = 3) {
+    let lastError;
+    for (let i = 1; i <= attempts; i++) {
+      try {
+        return await getPresignedUrl(file);
+      } catch (err) {
+        lastError = err;
+        if (i < attempts) {
+          await new Promise((r) => setTimeout(r, 500 * i));
+        }
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+  }
   const startUploadsIfNeeded = useCallback(
     (files) => {
       if (!autoUpload || !getPresignedUrl) return;
@@ -423,23 +404,267 @@ function UseUploadManager({
   };
 }
 
+// src/components/UploadProgressList.tsx
+import "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var UploadProgressList = ({
+  uploads
+}) => {
+  const visibleUploads = uploads.filter((u) => u.status !== "success");
+  if (visibleUploads.length === 0) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "w-100 d-flex flex-wrap gap-4 align-content-start mt-3",
+      style: { minHeight: "80px" },
+      children: visibleUploads.map((u) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "d-flex flex-column align-items-center",
+          style: {
+            width: 96,
+            userSelect: "none"
+          },
+          title: u.file.name,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+                style: {
+                  width: 64,
+                  height: 64
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "error" && /* @__PURE__ */ jsx2("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "small text-center text-truncate",
+                style: { width: "100%" },
+                children: u.file.name
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "w-100 mt-1", children: /* @__PURE__ */ jsx2("div", { className: "progress", style: { height: "4px" }, children: /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "progress-bar " + (u.status === "error" ? "bg-danger" : ""),
+                role: "progressbar",
+                style: { width: `${u.progress}%` },
+                "aria-valuenow": u.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            ) }) }),
+            u.status === "error" && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "text-danger small mt-1 text-center",
+                style: { width: "100%" },
+                children: u.error ?? "Upload failed"
+              }
+            )
+          ]
+        },
+        u.id
+      ))
+    }
+  );
+};
+
+// src/components/DesktopFileIcon.tsx
+import { useEffect, useRef, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DesktopFileIcon = ({
+  name,
+  sizeBytes,
+  downloadUrl,
+  onOpen,
+  onDelete
+}) => {
+  const [contextMenuPos, setContextMenuPos] = useState2(
+    null
+  );
+  const [isHovered, setIsHovered] = useState2(false);
+  const iconRef = useRef(null);
+  const menuRef = useRef(null);
+  const handleDoubleClick = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
+    if (downloadUrl) {
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = name ?? "";
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  };
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    setContextMenuPos({ x: e.clientX, y: e.clientY });
+  };
+  const closeMenu = () => setContextMenuPos(null);
+  const handleDownload = () => {
+    closeMenu();
+    if (!downloadUrl) return;
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    a.download = name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  const handleCopyUrl = async () => {
+    closeMenu();
+    if (!downloadUrl) return;
+    try {
+      await navigator.clipboard?.writeText(downloadUrl);
+    } catch (err) {
+      console.error("Failed to copy URL", err);
+    }
+  };
+  const handleDelete = () => {
+    closeMenu();
+    onDelete?.();
+  };
+  const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  useEffect(() => {
+    if (!contextMenuPos) return;
+    const handleGlobalClick = (e) => {
+      const target = e.target;
+      if (menuRef.current && menuRef.current.contains(target)) {
+        return;
+      }
+      if (iconRef.current && iconRef.current.contains(target)) {
+        return;
+      }
+      closeMenu();
+    };
+    document.addEventListener("mousedown", handleGlobalClick);
+    return () => {
+      document.removeEventListener("mousedown", handleGlobalClick);
+    };
+  }, [contextMenuPos]);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: iconRef,
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        style: {
+          width: 96,
+          cursor: "pointer",
+          userSelect: "none",
+          transition: "background-color 0.1s ease, border-color 0.1s ease"
+        },
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        title: name ?? void 0,
+        onClick: () => {
+          if (contextMenuPos) {
+            closeMenu();
+          }
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              style: {
+                width: 64,
+                height: 64
+              },
+              children: /* @__PURE__ */ jsx3("i", { className: "bi bi-file-earmark fs-2" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "small text-center text-truncate",
+              style: { width: "100%" },
+              children: name
+            }
+          ),
+          formattedSize && /* @__PURE__ */ jsx3("small", { className: "text-muted mt-1", children: formattedSize })
+        ]
+      }
+    ),
+    contextMenuPos && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: menuRef,
+        className: "position-fixed dropdown-menu show shadow-sm",
+        style: {
+          top: contextMenuPos.y,
+          left: contextMenuPos.x,
+          zIndex: 1050,
+          minWidth: 180
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item small",
+              onClick: handleDownload,
+              disabled: !downloadUrl,
+              children: "Download file"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item small",
+              onClick: handleCopyUrl,
+              disabled: !downloadUrl,
+              children: "Copy download URL"
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "dropdown-divider" }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item text-danger small",
+              onClick: handleDelete,
+              children: "Delete file"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
 // src/components/UploadContainer.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var UploadContainer = ({
-  title = "Upload files",
-  description = "Drag and drop files here, or click the button to browse.",
-  multiple = true,
-  accept,
   onFilesSelected,
   existingFiles = [],
+  existingFilesLoading = false,
   onExistingFileClick,
+  onDeleteFile,
   autoUpload = false,
   getPresignedUrl,
   onUploadComplete,
   onUploadError
 }) => {
-  const [isDragging, setIsDragging] = useState2(false);
-  const [fileNames, setFileNames] = useState2([]);
+  const [isDragging, setIsDragging] = useState3(false);
   const { uploads, startUploadsIfNeeded } = UseUploadManager({
     autoUpload,
     getPresignedUrl,
@@ -459,23 +684,16 @@ var UploadContainer = ({
     setIsDragging(false);
     const files = e.dataTransfer.files;
     if (!files || files.length === 0) return;
-    setFileNames(Array.from(files).map((f) => f.name));
-    onFilesSelected?.(files);
-    startUploadsIfNeeded(files);
-  };
-  const handleFileChange = (e) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) return;
-    setFileNames(Array.from(files).map((f) => f.name));
     onFilesSelected?.(files);
     startUploadsIfNeeded(files);
   };
-  const handleExistingFileClickInternal = (file) => {
+  const handleExistingFileOpen = (file) => {
     if (onExistingFileClick) {
       onExistingFileClick(file);
       return;
     }
     const a = document.createElement("a");
+    a.href = file.PublicUrl ?? "";
     a.download = file.Name ?? "";
     a.target = "_blank";
     a.rel = "noopener noreferrer";
@@ -483,62 +701,52 @@ var UploadContainer = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4("h5", { className: "card-title mb-2", children: title }),
-    /* @__PURE__ */ jsx4("p", { className: "card-text text-muted", children: description }),
-    existingFiles.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx4("h6", { className: "mb-2", children: "Existing files" }),
-      /* @__PURE__ */ jsx4("ul", { className: "list-group", children: existingFiles.map((file) => /* @__PURE__ */ jsxs4(
-        "li",
-        {
-          className: "list-group-item d-flex justify-content-between align-items-center",
-          style: { cursor: "pointer" },
-          onClick: () => handleExistingFileClickInternal(file),
-          children: [
-            /* @__PURE__ */ jsx4("span", { children: file.Name }),
-            typeof file.FileSize === "number" && /* @__PURE__ */ jsxs4("small", { className: "text-muted", children: [
-              (file.FileSize / 1024).toFixed(1),
-              " KB"
-            ] })
-          ]
-        },
-        file.Id
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx4(
-      UploadDropzone,
-      {
-        isDragging,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      UploadFilePicker,
-      {
-        multiple,
-        accept,
-        fileNames,
-        onFileChange: handleFileChange
-      }
-    ),
-    /* @__PURE__ */ jsx4(UploadProgressList, { uploads })
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    UploadDropzone,
+    {
+      isDragging,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className: "w-100",
+      style: { minHeight: "260px", alignItems: "stretch" },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+            style: { minHeight: "140px" },
+            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ jsx4("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
+              DesktopFileIcon,
+              {
+                name: file.Name,
+                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
+                downloadUrl: file.PublicUrl ?? null,
+                onOpen: () => handleExistingFileOpen(file),
+                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+              },
+              file.Id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "w-100 mt-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) })
+      ]
+    }
+  );
 };
 
 // src/hooks/UseContainers.ts
-import { useEffect, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 function UseContainers({ apiBaseUrl, parentId }) {
-  const [containers, setContainers] = useState3([]);
-  const [loading, setLoading] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [containers, setContainers] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
   const load = async () => {
     setLoading(true);
     setError(null);
     try {
       const sdkDb = new SparkStudioStorageSDK(
-        "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
+        apiBaseUrl
       );
       const result = await sdkDb.container.ReadRootContainers();
       setContainers(result);
@@ -548,7 +756,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
       setLoading(false);
     }
   };
-  useEffect(() => {
+  useEffect2(() => {
     void load();
   }, [apiBaseUrl, parentId]);
   return {
@@ -560,31 +768,39 @@ function UseContainers({ apiBaseUrl, parentId }) {
 }
 
 // src/components/ContainerUploadPanel.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ContainerUploadPanel = ({
   containerApiBaseUrl,
-  parentContainerId,
-  title = "Upload files",
-  description = "Drop files to upload. Existing files are listed below."
+  storageApiBaseUrl,
+  parentContainerId
 }) => {
-  const { containers, loading, error, reload } = UseContainers({
+  const { containers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
   const getPresignedUrl = async (file) => {
-    const sdkDb = new SparkStudioStorageSDK(
-      "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
-    );
-    const sdkS3 = new SparkStudioStorageSDK(
-      "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-    );
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
       encodeURIComponent(file.type)
     );
-    const resultS3 = await sdkS3.s3.GetPreSignedUrl(containerDTO);
-    return resultS3;
+    async function getPresignedUrlWithRetry(container, attempts = 3) {
+      let lastError;
+      for (let i = 1; i <= attempts; i++) {
+        try {
+          return await sdkS3.s3.GetPreSignedUrl(container);
+        } catch (err) {
+          lastError = err;
+          if (i < attempts) {
+            await new Promise((r) => setTimeout(r, 500 * i));
+          }
+        }
+      }
+      throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+    }
+    return getPresignedUrlWithRetry(containerDTO);
   };
   const handleUploadComplete = async (file, s3Url) => {
     console.log("Upload complete:", file.name, s3Url);
@@ -593,10 +809,16 @@ var ContainerUploadPanel = ({
   const handleUploadError = (file, err) => {
     console.error("Upload failed:", file.name, err);
   };
+  const handleOnDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    await reload();
+  };
   const handleExistingFileClick = (file) => {
-    const downloadUrl = `${containerApiBaseUrl}/api/Container/Download/${file.Id}`;
     const a = document.createElement("a");
-    a.href = downloadUrl;
+    a.href = file.PublicUrl ?? "";
     a.download = file.Name ?? "";
     a.target = "_blank";
     a.rel = "noopener noreferrer";
@@ -604,26 +826,19 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    loading && /* @__PURE__ */ jsx5("p", { children: "Loading existing files\u2026" }),
-    error && /* @__PURE__ */ jsxs5("p", { className: "text-danger", children: [
-      "Failed to load containers: ",
-      error.message
-    ] }),
-    /* @__PURE__ */ jsx5(
-      UploadContainer,
-      {
-        title,
-        description,
-        existingFiles: containers,
-        onExistingFileClick: handleExistingFileClick,
-        autoUpload: true,
-        getPresignedUrl,
-        onUploadComplete: handleUploadComplete,
-        onUploadError: handleUploadError
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx5(
+    UploadContainer,
+    {
+      existingFiles: containers,
+      existingFilesLoading: loading,
+      onExistingFileClick: handleExistingFileClick,
+      autoUpload: true,
+      getPresignedUrl,
+      onUploadComplete: handleUploadComplete,
+      onUploadError: handleUploadError,
+      onDeleteFile: handleOnDeleteFile
+    }
+  );
 };
 
 // src/views/HomeView.tsx
@@ -633,7 +848,7 @@ import {
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function HomeView() {
   return /* @__PURE__ */ jsx6(
     AuthenticatorProvider,
@@ -647,13 +862,13 @@ function HomeView() {
 }
 function HomeContent() {
   const { user } = useUser();
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx6(UserInfoCard, {}),
     user && /* @__PURE__ */ jsx6(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
-        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+        containerApiBaseUrl: "https://localhost:5001",
+        storageApiBaseUrl: "https://localhost:5001"
       }
     )
   ] });
@@ -664,13 +879,13 @@ export {
   ContainerDTO,
   ContainerType,
   ContainerUploadPanel,
+  DesktopFileIcon,
   Home,
   HomeView,
   S3,
   SparkStudioStorageSDK,
   UploadContainer,
   UploadDropzone,
-  UploadFilePicker,
   UploadFileToS3,
   UploadProgressList,
   UseContainers,