@sparkstudio/storage-ui 1.0.14 → 1.0.15

package/dist/index.cjs

@@ -478,6 +478,14 @@ var UploadProgressList = ({
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      className: "position-absolute top-50 start-50 translate-middle",
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" })
+                    }
+                  ),
                   u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
                 ]
               }
@@ -531,9 +539,11 @@ var DesktopFileIcon = ({
     null
   );
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react4.useState)(false);
   const iconRef = (0, import_react4.useRef)(null);
   const menuRef = (0, import_react4.useRef)(null);
   const handleDoubleClick = () => {
+    if (isDeleting) return;
     if (onOpen) {
       onOpen();
       return;
@@ -550,13 +560,14 @@ var DesktopFileIcon = ({
     }
   };
   const handleContextMenu = (e) => {
+    if (isDeleting) return;
     e.preventDefault();
     setContextMenuPos({ x: e.clientX, y: e.clientY });
   };
   const closeMenu = () => setContextMenuPos(null);
   const handleDownload = () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     const a = document.createElement("a");
     a.href = downloadUrl;
     a.download = name ?? "";
@@ -568,16 +579,22 @@ var DesktopFileIcon = ({
   };
   const handleCopyUrl = async () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     try {
       await navigator.clipboard?.writeText(downloadUrl);
     } catch (err) {
       console.error("Failed to copy URL", err);
     }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
     closeMenu();
-    onDelete?.();
+    if (!onDelete) return;
+    try {
+      setIsDeleting(true);
+      await Promise.resolve(onDelete());
+    } catch (err) {
+      console.error("Delete failed", err);
+    }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
   (0, import_react4.useEffect)(() => {
@@ -602,12 +619,15 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border-primary" : "border-transparent"),
         style: {
           width: 96,
-          cursor: "pointer",
+          cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease"
+          transition: "background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1,
+          borderWidth: 1,
+          borderStyle: "solid"
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
@@ -620,15 +640,18 @@ var DesktopFileIcon = ({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              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__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" })
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "spinner-border spinner-border-sm text-danger" }) })
+              ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -643,7 +666,7 @@ var DesktopFileIcon = ({
         ]
       }
     ),
-    contextMenuPos && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    contextMenuPos && !isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         ref: menuRef,
@@ -752,6 +775,7 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
@@ -761,16 +785,15 @@ var UploadContainer = ({
               DesktopFileIcon,
               {
                 name: file.Name,
-                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
-                downloadUrl: file.PublicUrl ?? null,
+                sizeBytes: file.FileSize,
+                downloadUrl: file.PublicUrl,
                 onOpen: () => handleExistingFileOpen(file),
-                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+                onDelete: () => onDeleteFile?.(file)
               },
               file.Id
             ))
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) })
+        )
       ]
     }
   );
@@ -802,6 +825,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
   }, [apiBaseUrl, parentId]);
   return {
     containers,
+    setContainers,
     loading,
     error,
     reload: load
@@ -815,17 +839,18 @@ var ContainerUploadPanel = ({
   storageApiBaseUrl,
   parentContainerId
 }) => {
-  const { containers, reload, loading } = UseContainers({
+  const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
   const getPresignedUrl = async (file) => {
     const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
     const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
-      encodeURIComponent(file.type)
+      encodeURIComponent(contentType)
     );
     async function getPresignedUrlWithRetry(container, attempts = 3) {
       let lastError;
@@ -850,13 +875,6 @@ 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 a = document.createElement("a");
     a.href = file.PublicUrl ?? "";
@@ -867,6 +885,13 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
+  const handleDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     UploadContainer,
     {
@@ -877,7 +902,7 @@ var ContainerUploadPanel = ({
       getPresignedUrl,
       onUploadComplete: handleUploadComplete,
       onUploadError: handleUploadError,
-      onDeleteFile: handleOnDeleteFile
+      onDeleteFile: handleDeleteFile
     }
   );
 };

package/dist/index.d.cts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum ContainerType {
@@ -102,7 +103,7 @@ interface ContainerUploadPanelProps {
     /** Optional parent container – if set, we query children instead of roots. */
     parentContainerId?: string;
 }
-declare const ContainerUploadPanel: React.FC<ContainerUploadPanelProps>;
+declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
 
 interface DesktopFileIconProps {
     name?: string | null;
@@ -110,10 +111,10 @@ interface DesktopFileIconProps {
     downloadUrl?: string | null;
     /** Double-click / open action */
     onOpen?: () => void;
-    /** Delete action */
-    onDelete?: () => void;
+    /** Delete action (can be async) */
+    onDelete?: () => Promise<void> | void;
 }
-declare const DesktopFileIcon: React.FC<DesktopFileIconProps>;
+declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface UploadContainerProps {
     multiple?: boolean;
@@ -129,20 +130,20 @@ interface UploadContainerProps {
     onUploadComplete?: (file: File, s3Url: string) => void;
     onUploadError?: (file: File, error: Error) => void;
 }
-declare const UploadContainer: React.FC<UploadContainerProps>;
+declare const UploadContainer: React__default.FC<UploadContainerProps>;
 
 interface UploadDropzoneProps {
     isDragging: boolean;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
     /** Extra className so you can make this the root wrapper */
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     /** Custom content to render inside the dropzone */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const UploadDropzone: React.FC<UploadDropzoneProps>;
+declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
 
 type UploadStatus = "pending" | "uploading" | "success" | "error";
 interface UploadState {
@@ -158,7 +159,7 @@ interface UploadState {
 interface UploadProgressListProps {
     uploads: UploadState[];
 }
-declare const UploadProgressList: React.FC<UploadProgressListProps>;
+declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
 
 /**
  * Helper: upload a file to a pre-signed S3 URL with progress + retries.
@@ -171,6 +172,7 @@ interface UseContainersOptions {
 }
 declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
     containers: ContainerDTO[];
+    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
     loading: boolean;
     error: Error | null;
     reload: () => Promise<void>;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare enum ContainerType {
@@ -102,7 +103,7 @@ interface ContainerUploadPanelProps {
     /** Optional parent container – if set, we query children instead of roots. */
     parentContainerId?: string;
 }
-declare const ContainerUploadPanel: React.FC<ContainerUploadPanelProps>;
+declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
 
 interface DesktopFileIconProps {
     name?: string | null;
@@ -110,10 +111,10 @@ interface DesktopFileIconProps {
     downloadUrl?: string | null;
     /** Double-click / open action */
     onOpen?: () => void;
-    /** Delete action */
-    onDelete?: () => void;
+    /** Delete action (can be async) */
+    onDelete?: () => Promise<void> | void;
 }
-declare const DesktopFileIcon: React.FC<DesktopFileIconProps>;
+declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface UploadContainerProps {
     multiple?: boolean;
@@ -129,20 +130,20 @@ interface UploadContainerProps {
     onUploadComplete?: (file: File, s3Url: string) => void;
     onUploadError?: (file: File, error: Error) => void;
 }
-declare const UploadContainer: React.FC<UploadContainerProps>;
+declare const UploadContainer: React__default.FC<UploadContainerProps>;
 
 interface UploadDropzoneProps {
     isDragging: boolean;
-    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
     /** Extra className so you can make this the root wrapper */
     className?: string;
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     /** Custom content to render inside the dropzone */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
-declare const UploadDropzone: React.FC<UploadDropzoneProps>;
+declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
 
 type UploadStatus = "pending" | "uploading" | "success" | "error";
 interface UploadState {
@@ -158,7 +159,7 @@ interface UploadState {
 interface UploadProgressListProps {
     uploads: UploadState[];
 }
-declare const UploadProgressList: React.FC<UploadProgressListProps>;
+declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
 
 /**
  * Helper: upload a file to a pre-signed S3 URL with progress + retries.
@@ -171,6 +172,7 @@ interface UseContainersOptions {
 }
 declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
     containers: ContainerDTO[];
+    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
     loading: boolean;
     error: Error | null;
     reload: () => Promise<void>;

package/dist/index.js

@@ -437,6 +437,14 @@ var UploadProgressList = ({
                 },
                 children: [
                   /* @__PURE__ */ jsx2("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "uploading" && /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      className: "position-absolute top-50 start-50 translate-middle",
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ jsx2("div", { className: "spinner-border spinner-border-sm text-primary" })
+                    }
+                  ),
                   u.status === "error" && /* @__PURE__ */ jsx2("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
                 ]
               }
@@ -490,9 +498,11 @@ var DesktopFileIcon = ({
     null
   );
   const [isHovered, setIsHovered] = useState2(false);
+  const [isDeleting, setIsDeleting] = useState2(false);
   const iconRef = useRef(null);
   const menuRef = useRef(null);
   const handleDoubleClick = () => {
+    if (isDeleting) return;
     if (onOpen) {
       onOpen();
       return;
@@ -509,13 +519,14 @@ var DesktopFileIcon = ({
     }
   };
   const handleContextMenu = (e) => {
+    if (isDeleting) return;
     e.preventDefault();
     setContextMenuPos({ x: e.clientX, y: e.clientY });
   };
   const closeMenu = () => setContextMenuPos(null);
   const handleDownload = () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     const a = document.createElement("a");
     a.href = downloadUrl;
     a.download = name ?? "";
@@ -527,16 +538,22 @@ var DesktopFileIcon = ({
   };
   const handleCopyUrl = async () => {
     closeMenu();
-    if (!downloadUrl) return;
+    if (!downloadUrl || isDeleting) return;
     try {
       await navigator.clipboard?.writeText(downloadUrl);
     } catch (err) {
       console.error("Failed to copy URL", err);
     }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
     closeMenu();
-    onDelete?.();
+    if (!onDelete) return;
+    try {
+      setIsDeleting(true);
+      await Promise.resolve(onDelete());
+    } catch (err) {
+      console.error("Delete failed", err);
+    }
   };
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
   useEffect(() => {
@@ -561,12 +578,15 @@ var DesktopFileIcon = ({
       "div",
       {
         ref: iconRef,
-        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border-primary" : "border-transparent"),
         style: {
           width: 96,
-          cursor: "pointer",
+          cursor: isDeleting ? "default" : "pointer",
           userSelect: "none",
-          transition: "background-color 0.1s ease, border-color 0.1s ease"
+          transition: "background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1,
+          borderWidth: 1,
+          borderStyle: "solid"
         },
         onDoubleClick: handleDoubleClick,
         onContextMenu: handleContextMenu,
@@ -579,15 +599,18 @@ var DesktopFileIcon = ({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              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__ */ jsx3("i", { className: "bi bi-file-earmark fs-2" })
+              children: [
+                /* @__PURE__ */ jsx3("i", { className: "bi bi-file-earmark fs-2" }),
+                isDeleting && /* @__PURE__ */ jsx3("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ jsx3("div", { className: "spinner-border spinner-border-sm text-danger" }) })
+              ]
             }
           ),
           /* @__PURE__ */ jsx3(
@@ -602,7 +625,7 @@ var DesktopFileIcon = ({
         ]
       }
     ),
-    contextMenuPos && /* @__PURE__ */ jsxs2(
+    contextMenuPos && !isDeleting && /* @__PURE__ */ jsxs2(
       "div",
       {
         ref: menuRef,
@@ -711,6 +734,7 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ jsx4("div", { className: "w-100 mb-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 }) }) }) }),
         /* @__PURE__ */ jsx4(
           "div",
           {
@@ -720,16 +744,15 @@ var UploadContainer = ({
               DesktopFileIcon,
               {
                 name: file.Name,
-                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
-                downloadUrl: file.PublicUrl ?? null,
+                sizeBytes: file.FileSize,
+                downloadUrl: file.PublicUrl,
                 onOpen: () => handleExistingFileOpen(file),
-                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+                onDelete: () => onDeleteFile?.(file)
               },
               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 }) }) }) })
+        )
       ]
     }
   );
@@ -761,6 +784,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
   }, [apiBaseUrl, parentId]);
   return {
     containers,
+    setContainers,
     loading,
     error,
     reload: load
@@ -774,17 +798,18 @@ var ContainerUploadPanel = ({
   storageApiBaseUrl,
   parentContainerId
 }) => {
-  const { containers, reload, loading } = UseContainers({
+  const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
   const getPresignedUrl = async (file) => {
     const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
     const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
-      encodeURIComponent(file.type)
+      encodeURIComponent(contentType)
     );
     async function getPresignedUrlWithRetry(container, attempts = 3) {
       let lastError;
@@ -809,13 +834,6 @@ 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 a = document.createElement("a");
     a.href = file.PublicUrl ?? "";
@@ -826,6 +844,13 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
+  const handleDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
   return /* @__PURE__ */ jsx5(
     UploadContainer,
     {
@@ -836,7 +861,7 @@ var ContainerUploadPanel = ({
       getPresignedUrl,
       onUploadComplete: handleUploadComplete,
       onUploadError: handleUploadError,
-      onDeleteFile: handleOnDeleteFile
+      onDeleteFile: handleDeleteFile
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",