@sparkstudio/storage-ui 1.0.29 → 1.0.31

package/dist/index.cjs

@@ -34,6 +34,8 @@ __export(index_exports, {
   HomeView: () => HomeView,
   S3: () => S3,
   SingleFileProcessUploader: () => SingleFileProcessUploader,
+  SingleImageUploadEditor: () => SingleImageUploadEditor,
+  SingleImageView: () => SingleImageView,
   SparkStudioStorageSDK: () => SparkStudioStorageSDK,
   TemporaryFileDTO: () => TemporaryFileDTO,
   UploadContainer: () => UploadContainer,
@@ -777,7 +779,8 @@ function ContainerIdGridPanel(props) {
     icon,
     iconHtml,
     deleteDisabled,
-    className
+    className,
+    onDeleted
   } = props;
   const sdkDb = (0, import_react5.useMemo)(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
@@ -891,6 +894,7 @@ function ContainerIdGridPanel(props) {
     const prev = idsRef.current ?? [];
     onContainerIdsChange(prev.filter((id) => id !== file.Id));
     setFiles((prevFiles) => prevFiles.filter((x) => x.Id !== file.Id));
+    onDeleted?.(file);
   };
   const openPicker = () => {
     const input = document.createElement("input");
@@ -1919,29 +1923,495 @@ var SingleFileProcessUploader = ({
   ] });
 };
 
-// src/views/HomeView.tsx
+// src/components/SingleImageUploadEditor.tsx
 var import_react13 = require("react");
-var import_authentication_ui = require("@sparkstudio/authentication-ui");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function SingleImageUploadEditor(props) {
+  const {
+    containerApiBaseUrl,
+    storageApiBaseUrl,
+    value = null,
+    onChange,
+    height = 280,
+    disabled = false
+  } = props;
+  const [isDragging, setIsDragging] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const pendingContainerRef = (0, import_react13.useRef)(null);
+  const [isDeleting, setIsDeleting] = (0, import_react13.useState)(false);
+  const [isLoadingImage, setIsLoadingImage] = (0, import_react13.useState)(false);
+  const [currentImage, setCurrentImage] = (0, import_react13.useState)(null);
+  const sdkDb = (0, import_react13.useMemo)(
+    () => new SparkStudioStorageSDK(containerApiBaseUrl),
+    [containerApiBaseUrl]
+  );
+  const sdkS3 = (0, import_react13.useMemo)(
+    () => new SparkStudioStorageSDK(storageApiBaseUrl),
+    [storageApiBaseUrl]
+  );
+  const busy = disabled || isDeleting || isLoadingImage;
+  (0, import_react13.useEffect)(() => {
+    let cancelled = false;
+    async function loadImage() {
+      if (!value) {
+        setCurrentImage(null);
+        return;
+      }
+      try {
+        setIsLoadingImage(true);
+        const image = await sdkDb.container.Read(value);
+        if (!cancelled) {
+          setCurrentImage(image ?? null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setCurrentImage(null);
+          setError(err instanceof Error ? err.message : "Failed to load image.");
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingImage(false);
+        }
+      }
+    }
+    setError(null);
+    loadImage();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, sdkDb]);
+  function getErrorMessage(err, fallback) {
+    return err instanceof Error ? err.message : fallback;
+  }
+  function isImageFile(file) {
+    return file.type.startsWith("image/");
+  }
+  async function createContainerForFile(file) {
+    const contentType = file.type || "application/octet-stream";
+    return sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(contentType)
+    );
+  }
+  async function getPresignedUrl(file) {
+    const container = await createContainerForFile(file);
+    pendingContainerRef.current = container;
+    let lastError;
+    for (let i = 1; i <= 3; i++) {
+      try {
+        return await sdkS3.s3.GetPreSignedUrl(container);
+      } catch (e) {
+        lastError = e;
+        if (i < 3) {
+          await new Promise((r) => setTimeout(r, 500 * i));
+        }
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+  }
+  async function deleteContainerFile(fileId) {
+    const fileContainer = await sdkDb.container.Read(fileId);
+    await sdkDb.container.DeleteContainer(fileId);
+    await sdkS3.s3.DeleteS3(fileContainer);
+  }
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload: true,
+    getPresignedUrl,
+    onUploadComplete: async () => {
+      setError(null);
+      const uploaded = pendingContainerRef.current;
+      if (uploaded) {
+        setCurrentImage(uploaded);
+        onChange?.(uploaded.Id);
+        pendingContainerRef.current = null;
+      }
+    },
+    onUploadError: async (_file, err) => {
+      const pending = pendingContainerRef.current;
+      if (pending) {
+        try {
+          await sdkDb.container.DeleteContainer(pending.Id);
+        } catch {
+        }
+      }
+      pendingContainerRef.current = null;
+      setError(getErrorMessage(err, "Upload failed"));
+    }
+  });
+  const visibleUploads = uploads.filter((u) => u.status !== "success");
+  const activeUpload = visibleUploads[0];
+  const showBottomProgress = !!activeUpload;
+  async function replaceWithFile(file) {
+    if (busy) {
+      return;
+    }
+    if (!isImageFile(file)) {
+      setError("Please select an image file.");
+      return;
+    }
+    try {
+      setError(null);
+      if (value) {
+        setIsDeleting(true);
+        await deleteContainerFile(value);
+        setCurrentImage(null);
+        onChange?.(null);
+      }
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      startUploadsIfNeeded(dt.files);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to replace image."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+  function openPicker() {
+    if (busy) {
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = false;
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
+      }
+      await replaceWithFile(file);
+    };
+    input.click();
+  }
+  async function handleRemove() {
+    if (!value || busy) {
+      return;
+    }
+    try {
+      setError(null);
+      setIsDeleting(true);
+      await deleteContainerFile(value);
+      setCurrentImage(null);
+      onChange?.(null);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to delete image."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "grid", gap: 8 }, children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 12, color: "crimson" }, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!busy) {
+            setIsDragging(true);
+          }
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!busy) {
+            setIsDragging(true);
+          }
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+        },
+        onDrop: async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+          if (busy) {
+            return;
+          }
+          const file = e.dataTransfer.files?.[0];
+          if (!file) {
+            return;
+          }
+          await replaceWithFile(file);
+        },
+        style: {
+          position: "relative",
+          borderRadius: 14,
+          border: isDragging ? "2px dashed rgba(13,110,253,0.9)" : "2px dashed rgba(0,0,0,0.15)",
+          background: isDragging ? "rgba(13,110,253,0.06)" : "transparent",
+          padding: 12,
+          minHeight: height,
+          overflow: "hidden"
+        },
+        children: [
+          isDragging ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: 14,
+                display: "grid",
+                placeItems: "center",
+                pointerEvents: "none",
+                background: "rgba(13,110,253,0.08)",
+                fontWeight: 800,
+                zIndex: 3
+              },
+              children: "Drop image to replace"
+            }
+          ) : null,
+          currentImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "div",
+              {
+                style: {
+                  border: "1px solid rgba(0,0,0,0.08)",
+                  borderRadius: 12,
+                  overflow: "hidden",
+                  background: "rgba(0,0,0,0.03)",
+                  minHeight: height
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "img",
+                  {
+                    src: currentImage.PublicUrl ?? "",
+                    alt: currentImage.Name ?? "Uploaded image",
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      height,
+                      objectFit: "contain",
+                      background: "rgba(0,0,0,0.02)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 20,
+                  right: 20,
+                  display: "flex",
+                  gap: 8,
+                  zIndex: 2
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: openPicker,
+                      disabled: busy,
+                      style: {
+                        border: "1px solid rgba(0,0,0,0.18)",
+                        background: "white",
+                        borderRadius: 10,
+                        padding: "8px 10px",
+                        cursor: busy ? "not-allowed" : "pointer",
+                        fontWeight: 600,
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                      },
+                      children: "Browse\u2026"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleRemove,
+                      disabled: busy,
+                      style: {
+                        border: "1px solid rgba(220,53,69,0.35)",
+                        background: "white",
+                        color: "#dc3545",
+                        borderRadius: 10,
+                        padding: "8px 10px",
+                        cursor: busy ? "not-allowed" : "pointer",
+                        fontWeight: 600,
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                      },
+                      children: "Remove"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                minHeight: height,
+                borderRadius: 12,
+                border: "1px solid rgba(0,0,0,0.08)",
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(0,0,0,0.02)",
+                textAlign: "center",
+                padding: 24
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    justifyItems: "center",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: openPicker,
+                        disabled: busy,
+                        style: {
+                          border: "1px solid rgba(0,0,0,0.18)",
+                          background: "white",
+                          borderRadius: 10,
+                          padding: "10px 16px",
+                          cursor: busy ? "not-allowed" : "pointer",
+                          fontWeight: 600
+                        },
+                        children: "Browse\u2026"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: "Drag and drop an image here" })
+                  ]
+                }
+              )
+            }
+          ),
+          showBottomProgress ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: 4,
+                background: "rgba(0,0,0,0.08)",
+                zIndex: 4
+              },
+              title: activeUpload.file.name,
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-valuenow": activeUpload.progress,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  style: {
+                    height: "100%",
+                    width: `${activeUpload.progress}%`,
+                    transition: "width 120ms linear",
+                    background: activeUpload.status === "error" ? "#dc3545" : "#0d6efd"
+                  }
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/SingleImageView.tsx
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SingleImageView(props) {
+  const { containerApiBaseUrl, value, height = 280, onLoaded } = props;
+  const [imageUrl, setImageUrl] = (0, import_react14.useState)(null);
+  const [loading, setLoading] = (0, import_react14.useState)(false);
+  const sdk = (0, import_react14.useMemo)(
+    () => new SparkStudioStorageSDK(containerApiBaseUrl),
+    [containerApiBaseUrl]
+  );
+  (0, import_react14.useEffect)(() => {
+    if (!value) {
+      setImageUrl(null);
+      onLoaded?.(null);
+      return;
+    }
+    setLoading(true);
+    sdk.container.Read(value).then((x) => {
+      const url = x?.PublicUrl ?? null;
+      setImageUrl(url);
+      onLoaded?.(url);
+    }).catch(() => {
+      setImageUrl(null);
+      onLoaded?.(null);
+    }).finally(() => setLoading(false));
+  }, [sdk, value, onLoaded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      style: {
+        height,
+        width: "100%",
+        overflow: "hidden",
+        display: "grid",
+        placeItems: "center",
+        position: "relative"
+      },
+      children: [
+        imageUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Image",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        ),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "div",
+          {
+            className: "spinner-border text-primary",
+            style: { position: "absolute" }
+          }
+        ),
+        !loading && !imageUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13, opacity: 0.6 }, children: "No image" })
+      ]
+    }
+  );
+}
+
+// src/views/HomeView.tsx
+var import_react15 = require("react");
+var import_authentication_ui = require("@sparkstudio/authentication-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CONTAINER_API = "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod";
 var STORAGE_API = "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod";
 function HomeView() {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_authentication_ui.AuthenticatorProvider,
     {
       googleClientId: import_authentication_ui.AppSettings.GoogleClientId,
       authenticationUrl: import_authentication_ui.AppSettings.AuthenticationUrl,
       accountsUrl: import_authentication_ui.AppSettings.AccountsUrl,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HomeContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HomeContent, {})
     }
   );
 }
 function HomeContent() {
   const { user } = (0, import_authentication_ui.useUser)();
-  const [ids, setIds] = (0, import_react13.useState)([]);
-  const [selectedId, setSelectedId] = (0, import_react13.useState)(void 0);
-  const [selectedFile, setSelectedFile] = (0, import_react13.useState)(null);
-  (0, import_react13.useEffect)(() => {
+  const [ids, setIds] = (0, import_react15.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react15.useState)(void 0);
+  const [selectedFile, setSelectedFile] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     if (selectedId && !ids.includes(selectedId)) {
       setSelectedId(void 0);
       setSelectedFile(null);
@@ -1954,10 +2424,10 @@ function HomeContent() {
       new TemporaryFileDTO({ Name: file.name, ContentType: contentType })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_authentication_ui.UserInfoCard, {}),
-    user ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_authentication_ui.UserInfoCard, {}),
+    user ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         SingleFileProcessUploader,
         {
           uploadOnDrop: true,
@@ -1968,7 +2438,7 @@ function HomeContent() {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ContainerIdGridPanel,
         {
           containerApiBaseUrl: CONTAINER_API,
@@ -1981,10 +2451,17 @@ function HomeContent() {
           onSelect: (file) => {
             setSelectedId(file.Id);
             setSelectedFile(file);
+          },
+          onDeleted: (file) => {
+            console.log("Deleted:", file);
+            if (selectedId === file.Id) {
+              setSelectedId(void 0);
+              setSelectedFile(null);
+            }
           }
         }
       ),
-      selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "div",
         {
           style: {
@@ -1994,9 +2471,9 @@ function HomeContent() {
             borderRadius: 12
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontWeight: 700 }, children: "Selected file" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: selectedFile.Name ?? "(no name)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedFile.PublicUrl ?? "(no public url)" })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontWeight: 700 }, children: "Selected file" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: selectedFile.Name ?? "(no name)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedFile.PublicUrl ?? "(no public url)" })
           ]
         }
       ) : null
@@ -2019,6 +2496,8 @@ function HomeContent() {
   HomeView,
   S3,
   SingleFileProcessUploader,
+  SingleImageUploadEditor,
+  SingleImageView,
   SparkStudioStorageSDK,
   TemporaryFileDTO,
   UploadContainer,

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
+import { Guid } from '@sparkstudio/authentication-ui';
 
 declare enum ContainerType {
     File = 0,
@@ -127,6 +128,7 @@ type Props = {
     iconHtml?: string;
     deleteDisabled?: boolean;
     className?: string;
+    onDeleted?: (file: ContainerDTO) => void;
 };
 declare function ContainerIdGridPanel(props: Props): react_jsx_runtime.JSX.Element;
 
@@ -229,6 +231,22 @@ interface SingleFileProcessUploaderProps {
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
 
+declare function SingleImageUploadEditor(props: {
+    containerApiBaseUrl: string;
+    storageApiBaseUrl: string;
+    value?: Guid | null;
+    onChange?: (fileId: Guid | null) => void;
+    height?: number;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SingleImageView(props: {
+    containerApiBaseUrl: string;
+    value: Guid | null;
+    height?: number;
+    onLoaded?: (url: string | null) => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface UploadDropzoneProps {
     isDragging: boolean;
     onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
@@ -287,4 +305,4 @@ declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplet
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerIdGridPanel, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, FileGridUploadPanel, FileIconCard, type FileIconCardProps, FileIconGrid, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerHandle, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerIdGridPanel, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, FileGridUploadPanel, FileIconCard, type FileIconCardProps, FileIconGrid, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SingleImageUploadEditor, SingleImageView, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerHandle, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
+import { Guid } from '@sparkstudio/authentication-ui';
 
 declare enum ContainerType {
     File = 0,
@@ -127,6 +128,7 @@ type Props = {
     iconHtml?: string;
     deleteDisabled?: boolean;
     className?: string;
+    onDeleted?: (file: ContainerDTO) => void;
 };
 declare function ContainerIdGridPanel(props: Props): react_jsx_runtime.JSX.Element;
 
@@ -229,6 +231,22 @@ interface SingleFileProcessUploaderProps {
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
 
+declare function SingleImageUploadEditor(props: {
+    containerApiBaseUrl: string;
+    storageApiBaseUrl: string;
+    value?: Guid | null;
+    onChange?: (fileId: Guid | null) => void;
+    height?: number;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SingleImageView(props: {
+    containerApiBaseUrl: string;
+    value: Guid | null;
+    height?: number;
+    onLoaded?: (url: string | null) => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface UploadDropzoneProps {
     isDragging: boolean;
     onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
@@ -287,4 +305,4 @@ declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplet
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerIdGridPanel, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, FileGridUploadPanel, FileIconCard, type FileIconCardProps, FileIconGrid, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerHandle, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerIdGridPanel, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, FileGridUploadPanel, FileIconCard, type FileIconCardProps, FileIconGrid, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SingleImageUploadEditor, SingleImageView, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerHandle, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };

package/dist/index.js

@@ -730,7 +730,8 @@ function ContainerIdGridPanel(props) {
     icon,
     iconHtml,
     deleteDisabled,
-    className
+    className,
+    onDeleted
   } = props;
   const sdkDb = useMemo2(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
@@ -844,6 +845,7 @@ function ContainerIdGridPanel(props) {
     const prev = idsRef.current ?? [];
     onContainerIdsChange(prev.filter((id) => id !== file.Id));
     setFiles((prevFiles) => prevFiles.filter((x) => x.Id !== file.Id));
+    onDeleted?.(file);
   };
   const openPicker = () => {
     const input = document.createElement("input");
@@ -1888,34 +1890,500 @@ var SingleFileProcessUploader = ({
   ] });
 };
 
+// src/components/SingleImageUploadEditor.tsx
+import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function SingleImageUploadEditor(props) {
+  const {
+    containerApiBaseUrl,
+    storageApiBaseUrl,
+    value = null,
+    onChange,
+    height = 280,
+    disabled = false
+  } = props;
+  const [isDragging, setIsDragging] = useState9(false);
+  const [error, setError] = useState9(null);
+  const pendingContainerRef = useRef5(null);
+  const [isDeleting, setIsDeleting] = useState9(false);
+  const [isLoadingImage, setIsLoadingImage] = useState9(false);
+  const [currentImage, setCurrentImage] = useState9(null);
+  const sdkDb = useMemo5(
+    () => new SparkStudioStorageSDK(containerApiBaseUrl),
+    [containerApiBaseUrl]
+  );
+  const sdkS3 = useMemo5(
+    () => new SparkStudioStorageSDK(storageApiBaseUrl),
+    [storageApiBaseUrl]
+  );
+  const busy = disabled || isDeleting || isLoadingImage;
+  useEffect4(() => {
+    let cancelled = false;
+    async function loadImage() {
+      if (!value) {
+        setCurrentImage(null);
+        return;
+      }
+      try {
+        setIsLoadingImage(true);
+        const image = await sdkDb.container.Read(value);
+        if (!cancelled) {
+          setCurrentImage(image ?? null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setCurrentImage(null);
+          setError(err instanceof Error ? err.message : "Failed to load image.");
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingImage(false);
+        }
+      }
+    }
+    setError(null);
+    loadImage();
+    return () => {
+      cancelled = true;
+    };
+  }, [value, sdkDb]);
+  function getErrorMessage(err, fallback) {
+    return err instanceof Error ? err.message : fallback;
+  }
+  function isImageFile(file) {
+    return file.type.startsWith("image/");
+  }
+  async function createContainerForFile(file) {
+    const contentType = file.type || "application/octet-stream";
+    return sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(contentType)
+    );
+  }
+  async function getPresignedUrl(file) {
+    const container = await createContainerForFile(file);
+    pendingContainerRef.current = container;
+    let lastError;
+    for (let i = 1; i <= 3; i++) {
+      try {
+        return await sdkS3.s3.GetPreSignedUrl(container);
+      } catch (e) {
+        lastError = e;
+        if (i < 3) {
+          await new Promise((r) => setTimeout(r, 500 * i));
+        }
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+  }
+  async function deleteContainerFile(fileId) {
+    const fileContainer = await sdkDb.container.Read(fileId);
+    await sdkDb.container.DeleteContainer(fileId);
+    await sdkS3.s3.DeleteS3(fileContainer);
+  }
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload: true,
+    getPresignedUrl,
+    onUploadComplete: async () => {
+      setError(null);
+      const uploaded = pendingContainerRef.current;
+      if (uploaded) {
+        setCurrentImage(uploaded);
+        onChange?.(uploaded.Id);
+        pendingContainerRef.current = null;
+      }
+    },
+    onUploadError: async (_file, err) => {
+      const pending = pendingContainerRef.current;
+      if (pending) {
+        try {
+          await sdkDb.container.DeleteContainer(pending.Id);
+        } catch {
+        }
+      }
+      pendingContainerRef.current = null;
+      setError(getErrorMessage(err, "Upload failed"));
+    }
+  });
+  const visibleUploads = uploads.filter((u) => u.status !== "success");
+  const activeUpload = visibleUploads[0];
+  const showBottomProgress = !!activeUpload;
+  async function replaceWithFile(file) {
+    if (busy) {
+      return;
+    }
+    if (!isImageFile(file)) {
+      setError("Please select an image file.");
+      return;
+    }
+    try {
+      setError(null);
+      if (value) {
+        setIsDeleting(true);
+        await deleteContainerFile(value);
+        setCurrentImage(null);
+        onChange?.(null);
+      }
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      startUploadsIfNeeded(dt.files);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to replace image."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+  function openPicker() {
+    if (busy) {
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = false;
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
+      }
+      await replaceWithFile(file);
+    };
+    input.click();
+  }
+  async function handleRemove() {
+    if (!value || busy) {
+      return;
+    }
+    try {
+      setError(null);
+      setIsDeleting(true);
+      await deleteContainerFile(value);
+      setCurrentImage(null);
+      onChange?.(null);
+    } catch (err) {
+      setError(getErrorMessage(err, "Failed to delete image."));
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs8("div", { style: { display: "grid", gap: 8 }, children: [
+    error ? /* @__PURE__ */ jsx11("div", { style: { fontSize: 12, color: "crimson" }, children: error }) : null,
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!busy) {
+            setIsDragging(true);
+          }
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!busy) {
+            setIsDragging(true);
+          }
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+        },
+        onDrop: async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+          if (busy) {
+            return;
+          }
+          const file = e.dataTransfer.files?.[0];
+          if (!file) {
+            return;
+          }
+          await replaceWithFile(file);
+        },
+        style: {
+          position: "relative",
+          borderRadius: 14,
+          border: isDragging ? "2px dashed rgba(13,110,253,0.9)" : "2px dashed rgba(0,0,0,0.15)",
+          background: isDragging ? "rgba(13,110,253,0.06)" : "transparent",
+          padding: 12,
+          minHeight: height,
+          overflow: "hidden"
+        },
+        children: [
+          isDragging ? /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: 14,
+                display: "grid",
+                placeItems: "center",
+                pointerEvents: "none",
+                background: "rgba(13,110,253,0.08)",
+                fontWeight: 800,
+                zIndex: 3
+              },
+              children: "Drop image to replace"
+            }
+          ) : null,
+          currentImage ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+            /* @__PURE__ */ jsx11(
+              "div",
+              {
+                style: {
+                  border: "1px solid rgba(0,0,0,0.08)",
+                  borderRadius: 12,
+                  overflow: "hidden",
+                  background: "rgba(0,0,0,0.03)",
+                  minHeight: height
+                },
+                children: /* @__PURE__ */ jsx11(
+                  "img",
+                  {
+                    src: currentImage.PublicUrl ?? "",
+                    alt: currentImage.Name ?? "Uploaded image",
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      height,
+                      objectFit: "contain",
+                      background: "rgba(0,0,0,0.02)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 20,
+                  right: 20,
+                  display: "flex",
+                  gap: 8,
+                  zIndex: 2
+                },
+                children: [
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: openPicker,
+                      disabled: busy,
+                      style: {
+                        border: "1px solid rgba(0,0,0,0.18)",
+                        background: "white",
+                        borderRadius: 10,
+                        padding: "8px 10px",
+                        cursor: busy ? "not-allowed" : "pointer",
+                        fontWeight: 600,
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                      },
+                      children: "Browse\u2026"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleRemove,
+                      disabled: busy,
+                      style: {
+                        border: "1px solid rgba(220,53,69,0.35)",
+                        background: "white",
+                        color: "#dc3545",
+                        borderRadius: 10,
+                        padding: "8px 10px",
+                        cursor: busy ? "not-allowed" : "pointer",
+                        fontWeight: 600,
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                      },
+                      children: "Remove"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                minHeight: height,
+                borderRadius: 12,
+                border: "1px solid rgba(0,0,0,0.08)",
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(0,0,0,0.02)",
+                textAlign: "center",
+                padding: 24
+              },
+              children: /* @__PURE__ */ jsxs8(
+                "div",
+                {
+                  style: {
+                    display: "grid",
+                    justifyItems: "center",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: openPicker,
+                        disabled: busy,
+                        style: {
+                          border: "1px solid rgba(0,0,0,0.18)",
+                          background: "white",
+                          borderRadius: 10,
+                          padding: "10px 16px",
+                          cursor: busy ? "not-allowed" : "pointer",
+                          fontWeight: 600
+                        },
+                        children: "Browse\u2026"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, opacity: 0.7 }, children: "Drag and drop an image here" })
+                  ]
+                }
+              )
+            }
+          ),
+          showBottomProgress ? /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                height: 4,
+                background: "rgba(0,0,0,0.08)",
+                zIndex: 4
+              },
+              title: activeUpload.file.name,
+              children: /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-valuenow": activeUpload.progress,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  style: {
+                    height: "100%",
+                    width: `${activeUpload.progress}%`,
+                    transition: "width 120ms linear",
+                    background: activeUpload.status === "error" ? "#dc3545" : "#0d6efd"
+                  }
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/SingleImageView.tsx
+import { useEffect as useEffect5, useMemo as useMemo6, useState as useState10 } from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function SingleImageView(props) {
+  const { containerApiBaseUrl, value, height = 280, onLoaded } = props;
+  const [imageUrl, setImageUrl] = useState10(null);
+  const [loading, setLoading] = useState10(false);
+  const sdk = useMemo6(
+    () => new SparkStudioStorageSDK(containerApiBaseUrl),
+    [containerApiBaseUrl]
+  );
+  useEffect5(() => {
+    if (!value) {
+      setImageUrl(null);
+      onLoaded?.(null);
+      return;
+    }
+    setLoading(true);
+    sdk.container.Read(value).then((x) => {
+      const url = x?.PublicUrl ?? null;
+      setImageUrl(url);
+      onLoaded?.(url);
+    }).catch(() => {
+      setImageUrl(null);
+      onLoaded?.(null);
+    }).finally(() => setLoading(false));
+  }, [sdk, value, onLoaded]);
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        height,
+        width: "100%",
+        overflow: "hidden",
+        display: "grid",
+        placeItems: "center",
+        position: "relative"
+      },
+      children: [
+        imageUrl && /* @__PURE__ */ jsx12(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Image",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        ),
+        loading && /* @__PURE__ */ jsx12(
+          "div",
+          {
+            className: "spinner-border text-primary",
+            style: { position: "absolute" }
+          }
+        ),
+        !loading && !imageUrl && /* @__PURE__ */ jsx12("div", { style: { fontSize: 13, opacity: 0.6 }, children: "No image" })
+      ]
+    }
+  );
+}
+
 // src/views/HomeView.tsx
-import { useEffect as useEffect4, useState as useState9 } from "react";
+import { useEffect as useEffect6, useState as useState11 } from "react";
 import {
   AppSettings,
   AuthenticatorProvider,
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var CONTAINER_API = "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod";
 var STORAGE_API = "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod";
 function HomeView() {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     AuthenticatorProvider,
     {
       googleClientId: AppSettings.GoogleClientId,
       authenticationUrl: AppSettings.AuthenticationUrl,
       accountsUrl: AppSettings.AccountsUrl,
-      children: /* @__PURE__ */ jsx11(HomeContent, {})
+      children: /* @__PURE__ */ jsx13(HomeContent, {})
     }
   );
 }
 function HomeContent() {
   const { user } = useUser();
-  const [ids, setIds] = useState9([]);
-  const [selectedId, setSelectedId] = useState9(void 0);
-  const [selectedFile, setSelectedFile] = useState9(null);
-  useEffect4(() => {
+  const [ids, setIds] = useState11([]);
+  const [selectedId, setSelectedId] = useState11(void 0);
+  const [selectedFile, setSelectedFile] = useState11(null);
+  useEffect6(() => {
     if (selectedId && !ids.includes(selectedId)) {
       setSelectedId(void 0);
       setSelectedFile(null);
@@ -1928,10 +2396,10 @@ function HomeContent() {
       new TemporaryFileDTO({ Name: file.name, ContentType: contentType })
     );
   }
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(UserInfoCard, {}),
-    user ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx13(UserInfoCard, {}),
+    user ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx13(
         SingleFileProcessUploader,
         {
           uploadOnDrop: true,
@@ -1942,7 +2410,7 @@ function HomeContent() {
           }
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(
         ContainerIdGridPanel,
         {
           containerApiBaseUrl: CONTAINER_API,
@@ -1955,10 +2423,17 @@ function HomeContent() {
           onSelect: (file) => {
             setSelectedId(file.Id);
             setSelectedFile(file);
+          },
+          onDeleted: (file) => {
+            console.log("Deleted:", file);
+            if (selectedId === file.Id) {
+              setSelectedId(void 0);
+              setSelectedFile(null);
+            }
           }
         }
       ),
-      selectedFile ? /* @__PURE__ */ jsxs8(
+      selectedFile ? /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -1968,9 +2443,9 @@ function HomeContent() {
             borderRadius: 12
           },
           children: [
-            /* @__PURE__ */ jsx11("div", { style: { fontWeight: 700 }, children: "Selected file" }),
-            /* @__PURE__ */ jsx11("div", { children: selectedFile.Name ?? "(no name)" }),
-            /* @__PURE__ */ jsx11("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedFile.PublicUrl ?? "(no public url)" })
+            /* @__PURE__ */ jsx13("div", { style: { fontWeight: 700 }, children: "Selected file" }),
+            /* @__PURE__ */ jsx13("div", { children: selectedFile.Name ?? "(no name)" }),
+            /* @__PURE__ */ jsx13("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedFile.PublicUrl ?? "(no public url)" })
           ]
         }
       ) : null
@@ -1992,6 +2467,8 @@ export {
   HomeView,
   S3,
   SingleFileProcessUploader,
+  SingleImageUploadEditor,
+  SingleImageView,
   SparkStudioStorageSDK,
   TemporaryFileDTO,
   UploadContainer,

package/package.json

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