@sparkstudio/storage-ui 1.0.26 → 1.0.27

package/dist/index.cjs

@@ -1066,25 +1066,71 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
+var SingleFileProcessUploader = ({
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadFailed,
+  accept,
+  disabled,
+  uploadOnDrop = false
+}) => {
   const [selectedFile, setSelectedFile] = (0, import_react8.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
   const [progress, setProgress] = (0, import_react8.useState)(null);
   const [status, setStatus] = (0, import_react8.useState)("idle");
-  const [errorMessage, setErrorMessage] = (0, import_react8.useState)(null);
   const fileInputRef = (0, import_react8.useRef)(null);
-  const handleFilesSelected = (0, import_react8.useCallback)((files) => {
-    if (!files || files.length === 0) return;
-    const file = files[0];
+  function getErrorMessage(err) {
+    if (err instanceof Error) return err.message;
+    if (typeof err === "string") return err;
+    return "Unknown error during upload.";
+  }
+  const isUploading = status === "uploading";
+  const resetUiForNewFile = (0, import_react8.useCallback)((file) => {
     setSelectedFile(file);
     setStatus("idle");
     setProgress(null);
-    setErrorMessage(null);
   }, []);
-  const handleBrowseClick = () => {
+  const handleBrowseClick = (0, import_react8.useCallback)(() => {
     if (disabled) return;
+    if (isUploading) return;
     fileInputRef.current?.click();
-  };
+  }, [disabled, isUploading]);
+  const startUpload = (0, import_react8.useCallback)(
+    async (file) => {
+      if (disabled) return;
+      if (isUploading) return;
+      try {
+        setStatus("uploading");
+        setProgress(0);
+        const presignedUrl = await getPresignedUrl(file);
+        await UploadFileToS3(
+          file,
+          presignedUrl?.PresignedUrl ?? "",
+          (p) => setProgress(p)
+        );
+        setStatus("success");
+        onUploadComplete?.(file, presignedUrl);
+      } catch (err) {
+        const message = getErrorMessage(err);
+        console.error("Upload failed:", message);
+        setStatus("error");
+        onUploadFailed?.({ file, message, error: err });
+      }
+    },
+    [disabled, getPresignedUrl, isUploading, onUploadComplete, onUploadFailed]
+  );
+  const handleFilesSelected = (0, import_react8.useCallback)(
+    (files) => {
+      if (!files || files.length === 0) return;
+      if (disabled) return;
+      const file = files[0];
+      resetUiForNewFile(file);
+      if (uploadOnDrop) {
+        void startUpload(file);
+      }
+    },
+    [disabled, resetUiForNewFile, startUpload, uploadOnDrop]
+  );
   const handleInputChange = (e) => {
     handleFilesSelected(e.target.files);
     e.target.value = "";
@@ -1102,36 +1148,12 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
     e.preventDefault();
     if (disabled) return;
     setIsDragging(false);
-    const files = e.dataTransfer.files;
-    handleFilesSelected(files);
+    handleFilesSelected(e.dataTransfer.files);
   };
   const handleProcessClick = async () => {
     if (!selectedFile || disabled) return;
-    try {
-      setStatus("uploading");
-      setProgress(0);
-      setErrorMessage(null);
-      const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(
-        selectedFile,
-        presignedUrl?.PresignedUrl ?? "",
-        (p) => setProgress(p)
-      );
-      setStatus("success");
-      onUploadComplete?.(selectedFile, presignedUrl);
-    } catch (err) {
-      const message = getErrorMessage(err);
-      console.error("Upload failed:", message);
-      setStatus("error");
-      setErrorMessage(message);
-    }
+    await startUpload(selectedFile);
   };
-  function getErrorMessage(err) {
-    if (err instanceof Error) return err.message;
-    if (typeof err === "string") return err;
-    return "Unknown error during upload.";
-  }
-  const isUploading = status === "uploading";
   const dropzoneClasses = [
     "border",
     "border-2",
@@ -1140,10 +1162,33 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
     "text-center",
     "user-select-none",
     disabled ? "opacity-50" : "cursor-pointer",
-    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-dashed border-2"
   ].join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    isUploading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex justify-content-between mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " ",
+          "Uploading..."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          progress ?? 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "progress", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "div",
+        {
+          className: "progress-bar progress-bar-striped progress-bar-animated",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress ?? 0,
+          style: { width: `${progress ?? 0}%` }
+        }
+      ) })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         className: dropzoneClasses,
@@ -1162,52 +1207,43 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
               accept,
               className: "d-none",
               onChange: handleInputChange,
-              disabled
+              disabled: disabled || isUploading
             }
           ),
           selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "btn btn-primary align-self-start",
+                disabled: disabled || isUploading,
+                children: "Browse file\u2026"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Click here to change file or drag a new one." })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Click here to change file or drag a new one." }),
+            uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Upload starts automatically." })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "btn btn-primary align-self-start",
+                disabled: disabled || isUploading,
+                children: "Browse file\u2026"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Drag & drop a file here" }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex justify-content-between mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" }),
-          " Uploading..."
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-          progress ?? 0,
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "progress", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "div",
-        {
-          className: "progress-bar progress-bar-striped progress-bar-animated",
-          role: "progressbar",
-          "aria-valuemin": 0,
-          "aria-valuemax": 100,
-          "aria-valuenow": progress ?? 0,
-          style: { width: `${progress ?? 0}%` }
-        }
-      ) })
-    ] }),
-    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "small text-success", children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small text-danger", children: [
-      "Upload failed: ",
-      errorMessage
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    !uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -1238,8 +1274,8 @@ function HomeContent() {
   const { user } = (0, import_authentication_ui.useUser)();
   async function getPresignedUrlFromApi(file) {
     const res = new SparkStudioStorageSDK(
-      // "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-      "https://localhost:5001"
+      "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      //"https://localhost:5001"
     );
     const contentType = file.type || "application/octet-stream";
     const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
@@ -1251,6 +1287,7 @@ function HomeContent() {
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SingleFileProcessUploader,
         {
+          uploadOnDrop: true,
           accept: "*/*",
           getPresignedUrl: getPresignedUrlFromApi,
           onUploadComplete: (file, s3Url) => {
@@ -1261,8 +1298,8 @@ function HomeContent() {
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ContainerUploadPanel,
         {
-          containerApiBaseUrl: "https://localhost:5001",
-          storageApiBaseUrl: "https://localhost:5001"
+          containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+          storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
         }
       )
     ] })

package/dist/index.d.cts

@@ -134,8 +134,16 @@ declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 interface SingleFileProcessUploaderProps {
     getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
     onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
+    /** NEW: send errors outward instead of rendering them */
+    onUploadFailed?: (args: {
+        file: File;
+        message: string;
+        error: unknown;
+    }) => void;
     accept?: string;
     disabled?: boolean;
+    /** if true, auto-start upload immediately after drop/select */
+    uploadOnDrop?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
 

package/dist/index.d.ts

@@ -134,8 +134,16 @@ declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 interface SingleFileProcessUploaderProps {
     getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
     onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
+    /** NEW: send errors outward instead of rendering them */
+    onUploadFailed?: (args: {
+        file: File;
+        message: string;
+        error: unknown;
+    }) => void;
     accept?: string;
     disabled?: boolean;
+    /** if true, auto-start upload immediately after drop/select */
+    uploadOnDrop?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
 

package/dist/index.js

@@ -1033,25 +1033,71 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
+var SingleFileProcessUploader = ({
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadFailed,
+  accept,
+  disabled,
+  uploadOnDrop = false
+}) => {
   const [selectedFile, setSelectedFile] = useState5(null);
   const [isDragging, setIsDragging] = useState5(false);
   const [progress, setProgress] = useState5(null);
   const [status, setStatus] = useState5("idle");
-  const [errorMessage, setErrorMessage] = useState5(null);
   const fileInputRef = useRef2(null);
-  const handleFilesSelected = useCallback2((files) => {
-    if (!files || files.length === 0) return;
-    const file = files[0];
+  function getErrorMessage(err) {
+    if (err instanceof Error) return err.message;
+    if (typeof err === "string") return err;
+    return "Unknown error during upload.";
+  }
+  const isUploading = status === "uploading";
+  const resetUiForNewFile = useCallback2((file) => {
     setSelectedFile(file);
     setStatus("idle");
     setProgress(null);
-    setErrorMessage(null);
   }, []);
-  const handleBrowseClick = () => {
+  const handleBrowseClick = useCallback2(() => {
     if (disabled) return;
+    if (isUploading) return;
     fileInputRef.current?.click();
-  };
+  }, [disabled, isUploading]);
+  const startUpload = useCallback2(
+    async (file) => {
+      if (disabled) return;
+      if (isUploading) return;
+      try {
+        setStatus("uploading");
+        setProgress(0);
+        const presignedUrl = await getPresignedUrl(file);
+        await UploadFileToS3(
+          file,
+          presignedUrl?.PresignedUrl ?? "",
+          (p) => setProgress(p)
+        );
+        setStatus("success");
+        onUploadComplete?.(file, presignedUrl);
+      } catch (err) {
+        const message = getErrorMessage(err);
+        console.error("Upload failed:", message);
+        setStatus("error");
+        onUploadFailed?.({ file, message, error: err });
+      }
+    },
+    [disabled, getPresignedUrl, isUploading, onUploadComplete, onUploadFailed]
+  );
+  const handleFilesSelected = useCallback2(
+    (files) => {
+      if (!files || files.length === 0) return;
+      if (disabled) return;
+      const file = files[0];
+      resetUiForNewFile(file);
+      if (uploadOnDrop) {
+        void startUpload(file);
+      }
+    },
+    [disabled, resetUiForNewFile, startUpload, uploadOnDrop]
+  );
   const handleInputChange = (e) => {
     handleFilesSelected(e.target.files);
     e.target.value = "";
@@ -1069,36 +1115,12 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
     e.preventDefault();
     if (disabled) return;
     setIsDragging(false);
-    const files = e.dataTransfer.files;
-    handleFilesSelected(files);
+    handleFilesSelected(e.dataTransfer.files);
   };
   const handleProcessClick = async () => {
     if (!selectedFile || disabled) return;
-    try {
-      setStatus("uploading");
-      setProgress(0);
-      setErrorMessage(null);
-      const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(
-        selectedFile,
-        presignedUrl?.PresignedUrl ?? "",
-        (p) => setProgress(p)
-      );
-      setStatus("success");
-      onUploadComplete?.(selectedFile, presignedUrl);
-    } catch (err) {
-      const message = getErrorMessage(err);
-      console.error("Upload failed:", message);
-      setStatus("error");
-      setErrorMessage(message);
-    }
+    await startUpload(selectedFile);
   };
-  function getErrorMessage(err) {
-    if (err instanceof Error) return err.message;
-    if (typeof err === "string") return err;
-    return "Unknown error during upload.";
-  }
-  const isUploading = status === "uploading";
   const dropzoneClasses = [
     "border",
     "border-2",
@@ -1107,10 +1129,33 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
     "text-center",
     "user-select-none",
     disabled ? "opacity-50" : "cursor-pointer",
-    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-dashed border-2"
   ].join(" ");
   return /* @__PURE__ */ jsxs4("div", { className: "d-flex flex-column gap-2", children: [
-    /* @__PURE__ */ jsxs4(
+    isUploading ? /* @__PURE__ */ jsxs4("div", { className: "small", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "d-flex justify-content-between mb-1", children: [
+        /* @__PURE__ */ jsxs4("span", { children: [
+          /* @__PURE__ */ jsx6("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " ",
+          "Uploading..."
+        ] }),
+        /* @__PURE__ */ jsxs4("span", { children: [
+          progress ?? 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "progress", children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "progress-bar progress-bar-striped progress-bar-animated",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress ?? 0,
+          style: { width: `${progress ?? 0}%` }
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs4(
       "div",
       {
         className: dropzoneClasses,
@@ -1129,52 +1174,43 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, di
               accept,
               className: "d-none",
               onChange: handleInputChange,
-              disabled
+              disabled: disabled || isUploading
             }
           ),
           selectedFile ? /* @__PURE__ */ jsxs4("div", { className: "small", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "btn btn-primary align-self-start",
+                disabled: disabled || isUploading,
+                children: "Browse file\u2026"
+              }
+            ),
             /* @__PURE__ */ jsxs4("div", { children: [
               /* @__PURE__ */ jsx6("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "Click here to change file or drag a new one." })
+            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "Click here to change file or drag a new one." }),
+            uploadOnDrop && /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "Upload starts automatically." })
           ] }) : /* @__PURE__ */ jsxs4("div", { className: "small", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "btn btn-primary align-self-start",
+                disabled: disabled || isUploading,
+                children: "Browse file\u2026"
+              }
+            ),
             /* @__PURE__ */ jsx6("div", { children: "Drag & drop a file here" }),
             /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ jsxs4("div", { className: "small", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "d-flex justify-content-between mb-1", children: [
-        /* @__PURE__ */ jsxs4("span", { children: [
-          /* @__PURE__ */ jsx6("div", { className: "spinner-border spinner-border-sm text-primary" }),
-          " Uploading..."
-        ] }),
-        /* @__PURE__ */ jsxs4("span", { children: [
-          progress ?? 0,
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx6("div", { className: "progress", children: /* @__PURE__ */ jsx6(
-        "div",
-        {
-          className: "progress-bar progress-bar-striped progress-bar-animated",
-          role: "progressbar",
-          "aria-valuemin": 0,
-          "aria-valuemax": 100,
-          "aria-valuenow": progress ?? 0,
-          style: { width: `${progress ?? 0}%` }
-        }
-      ) })
-    ] }),
-    status === "success" && /* @__PURE__ */ jsx6("div", { className: "small text-success", children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ jsxs4("div", { className: "small text-danger", children: [
-      "Upload failed: ",
-      errorMessage
-    ] }),
-    /* @__PURE__ */ jsx6(
+    !uploadOnDrop && /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -1210,8 +1246,8 @@ function HomeContent() {
   const { user } = useUser();
   async function getPresignedUrlFromApi(file) {
     const res = new SparkStudioStorageSDK(
-      // "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-      "https://localhost:5001"
+      "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      //"https://localhost:5001"
     );
     const contentType = file.type || "application/octet-stream";
     const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
@@ -1223,6 +1259,7 @@ function HomeContent() {
       /* @__PURE__ */ jsx7(
         SingleFileProcessUploader,
         {
+          uploadOnDrop: true,
           accept: "*/*",
           getPresignedUrl: getPresignedUrlFromApi,
           onUploadComplete: (file, s3Url) => {
@@ -1233,8 +1270,8 @@ function HomeContent() {
       /* @__PURE__ */ jsx7(
         ContainerUploadPanel,
         {
-          containerApiBaseUrl: "https://localhost:5001",
-          storageApiBaseUrl: "https://localhost:5001"
+          containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+          storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
         }
       )
     ] })

package/package.json

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