@sparkstudio/storage-ui 1.0.31 → 1.0.33

package/dist/index.cjs

@@ -1950,31 +1950,41 @@ function SingleImageUploadEditor(props) {
     [storageApiBaseUrl]
   );
   const busy = disabled || isDeleting || isLoadingImage;
+  function logError(context, err) {
+    console.error(`[SingleImageUploadEditor] ${context}`, err);
+  }
+  function resetState() {
+    setCurrentImage(null);
+    setError(null);
+    pendingContainerRef.current = null;
+  }
   (0, import_react13.useEffect)(() => {
     let cancelled = false;
     async function loadImage() {
       if (!value) {
-        setCurrentImage(null);
+        resetState();
         return;
       }
       try {
+        setError(null);
         setIsLoadingImage(true);
         const image = await sdkDb.container.Read(value);
-        if (!cancelled) {
-          setCurrentImage(image ?? null);
+        if (cancelled) {
+          return;
         }
+        setCurrentImage(image ?? null);
       } catch (err) {
-        if (!cancelled) {
-          setCurrentImage(null);
-          setError(err instanceof Error ? err.message : "Failed to load image.");
+        if (cancelled) {
+          return;
         }
+        logError(`Failed to load image for value '${String(value)}'`, err);
+        resetState();
       } finally {
         if (!cancelled) {
           setIsLoadingImage(false);
         }
       }
     }
-    setError(null);
     loadImage();
     return () => {
       cancelled = true;
@@ -2024,18 +2034,21 @@ function SingleImageUploadEditor(props) {
       if (uploaded) {
         setCurrentImage(uploaded);
         onChange?.(uploaded.Id);
-        pendingContainerRef.current = null;
       }
+      pendingContainerRef.current = null;
     },
     onUploadError: async (_file, err) => {
       const pending = pendingContainerRef.current;
       if (pending) {
         try {
           await sdkDb.container.DeleteContainer(pending.Id);
-        } catch {
+        } catch (cleanupErr) {
+          logError("Failed to cleanup pending container after upload error", cleanupErr);
         }
       }
       pendingContainerRef.current = null;
+      logError("Upload failed", err);
+      setCurrentImage(null);
       setError(getErrorMessage(err, "Upload failed"));
     }
   });
@@ -2054,7 +2067,11 @@ function SingleImageUploadEditor(props) {
       setError(null);
       if (value) {
         setIsDeleting(true);
-        await deleteContainerFile(value);
+        try {
+          await deleteContainerFile(value);
+        } catch (err) {
+          logError(`Failed to delete existing container '${String(value)}'`, err);
+        }
         setCurrentImage(null);
         onChange?.(null);
       }
@@ -2062,6 +2079,8 @@ function SingleImageUploadEditor(props) {
       dt.items.add(file);
       startUploadsIfNeeded(dt.files);
     } catch (err) {
+      logError("Failed to replace image", err);
+      resetState();
       setError(getErrorMessage(err, "Failed to replace image."));
     } finally {
       setIsDeleting(false);
@@ -2091,11 +2110,16 @@ function SingleImageUploadEditor(props) {
     try {
       setError(null);
       setIsDeleting(true);
-      await deleteContainerFile(value);
-      setCurrentImage(null);
+      try {
+        await deleteContainerFile(value);
+      } catch (err) {
+        logError(`Failed to delete container '${String(value)}'`, err);
+      }
+      resetState();
       onChange?.(null);
     } catch (err) {
-      setError(getErrorMessage(err, "Failed to delete image."));
+      logError("Failed to delete image", err);
+      resetState();
     } finally {
       setIsDeleting(false);
     }
@@ -2336,20 +2360,40 @@ function SingleImageView(props) {
     [containerApiBaseUrl]
   );
   (0, import_react14.useEffect)(() => {
-    if (!value) {
-      setImageUrl(null);
-      onLoaded?.(null);
-      return;
+    let cancelled = false;
+    async function load() {
+      if (!value) {
+        setLoading(false);
+        setImageUrl(null);
+        onLoaded?.(null);
+        return;
+      }
+      try {
+        setLoading(true);
+        const x = await sdk.container.Read(value);
+        const url = x?.PublicUrl ?? null;
+        if (cancelled) {
+          return;
+        }
+        setImageUrl(url);
+        onLoaded?.(url);
+      } catch (err) {
+        if (cancelled) {
+          return;
+        }
+        console.error(`[SingleImageView] Failed to load image '${String(value)}'`, err);
+        setImageUrl(null);
+        onLoaded?.(null);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
     }
-    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));
+    load();
+    return () => {
+      cancelled = true;
+    };
   }, [sdk, value, onLoaded]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -2363,7 +2407,7 @@ function SingleImageView(props) {
         position: "relative"
       },
       children: [
-        imageUrl && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "img",
           {
             src: imageUrl,
@@ -2375,15 +2419,15 @@ function SingleImageView(props) {
               display: "block"
             }
           }
-        ),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ) : null,
+        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" })
+        ) : null,
+        !loading && !imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontSize: 13, opacity: 0.6 }, children: "No image" }) : null
       ]
     }
   );

package/dist/index.js

@@ -1917,31 +1917,41 @@ function SingleImageUploadEditor(props) {
     [storageApiBaseUrl]
   );
   const busy = disabled || isDeleting || isLoadingImage;
+  function logError(context, err) {
+    console.error(`[SingleImageUploadEditor] ${context}`, err);
+  }
+  function resetState() {
+    setCurrentImage(null);
+    setError(null);
+    pendingContainerRef.current = null;
+  }
   useEffect4(() => {
     let cancelled = false;
     async function loadImage() {
       if (!value) {
-        setCurrentImage(null);
+        resetState();
         return;
       }
       try {
+        setError(null);
         setIsLoadingImage(true);
         const image = await sdkDb.container.Read(value);
-        if (!cancelled) {
-          setCurrentImage(image ?? null);
+        if (cancelled) {
+          return;
         }
+        setCurrentImage(image ?? null);
       } catch (err) {
-        if (!cancelled) {
-          setCurrentImage(null);
-          setError(err instanceof Error ? err.message : "Failed to load image.");
+        if (cancelled) {
+          return;
         }
+        logError(`Failed to load image for value '${String(value)}'`, err);
+        resetState();
       } finally {
         if (!cancelled) {
           setIsLoadingImage(false);
         }
       }
     }
-    setError(null);
     loadImage();
     return () => {
       cancelled = true;
@@ -1991,18 +2001,21 @@ function SingleImageUploadEditor(props) {
       if (uploaded) {
         setCurrentImage(uploaded);
         onChange?.(uploaded.Id);
-        pendingContainerRef.current = null;
       }
+      pendingContainerRef.current = null;
     },
     onUploadError: async (_file, err) => {
       const pending = pendingContainerRef.current;
       if (pending) {
         try {
           await sdkDb.container.DeleteContainer(pending.Id);
-        } catch {
+        } catch (cleanupErr) {
+          logError("Failed to cleanup pending container after upload error", cleanupErr);
         }
       }
       pendingContainerRef.current = null;
+      logError("Upload failed", err);
+      setCurrentImage(null);
       setError(getErrorMessage(err, "Upload failed"));
     }
   });
@@ -2021,7 +2034,11 @@ function SingleImageUploadEditor(props) {
       setError(null);
       if (value) {
         setIsDeleting(true);
-        await deleteContainerFile(value);
+        try {
+          await deleteContainerFile(value);
+        } catch (err) {
+          logError(`Failed to delete existing container '${String(value)}'`, err);
+        }
         setCurrentImage(null);
         onChange?.(null);
       }
@@ -2029,6 +2046,8 @@ function SingleImageUploadEditor(props) {
       dt.items.add(file);
       startUploadsIfNeeded(dt.files);
     } catch (err) {
+      logError("Failed to replace image", err);
+      resetState();
       setError(getErrorMessage(err, "Failed to replace image."));
     } finally {
       setIsDeleting(false);
@@ -2058,11 +2077,16 @@ function SingleImageUploadEditor(props) {
     try {
       setError(null);
       setIsDeleting(true);
-      await deleteContainerFile(value);
-      setCurrentImage(null);
+      try {
+        await deleteContainerFile(value);
+      } catch (err) {
+        logError(`Failed to delete container '${String(value)}'`, err);
+      }
+      resetState();
       onChange?.(null);
     } catch (err) {
-      setError(getErrorMessage(err, "Failed to delete image."));
+      logError("Failed to delete image", err);
+      resetState();
     } finally {
       setIsDeleting(false);
     }
@@ -2303,20 +2327,40 @@ function SingleImageView(props) {
     [containerApiBaseUrl]
   );
   useEffect5(() => {
-    if (!value) {
-      setImageUrl(null);
-      onLoaded?.(null);
-      return;
+    let cancelled = false;
+    async function load() {
+      if (!value) {
+        setLoading(false);
+        setImageUrl(null);
+        onLoaded?.(null);
+        return;
+      }
+      try {
+        setLoading(true);
+        const x = await sdk.container.Read(value);
+        const url = x?.PublicUrl ?? null;
+        if (cancelled) {
+          return;
+        }
+        setImageUrl(url);
+        onLoaded?.(url);
+      } catch (err) {
+        if (cancelled) {
+          return;
+        }
+        console.error(`[SingleImageView] Failed to load image '${String(value)}'`, err);
+        setImageUrl(null);
+        onLoaded?.(null);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
     }
-    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));
+    load();
+    return () => {
+      cancelled = true;
+    };
   }, [sdk, value, onLoaded]);
   return /* @__PURE__ */ jsxs9(
     "div",
@@ -2330,7 +2374,7 @@ function SingleImageView(props) {
         position: "relative"
       },
       children: [
-        imageUrl && /* @__PURE__ */ jsx12(
+        imageUrl ? /* @__PURE__ */ jsx12(
           "img",
           {
             src: imageUrl,
@@ -2342,15 +2386,15 @@ function SingleImageView(props) {
               display: "block"
             }
           }
-        ),
-        loading && /* @__PURE__ */ jsx12(
+        ) : null,
+        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" })
+        ) : null,
+        !loading && !imageUrl ? /* @__PURE__ */ jsx12("div", { style: { fontSize: 13, opacity: 0.6 }, children: "No image" }) : null
       ]
     }
   );

package/package.json

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