@sparkstudio/storage-ui 1.0.19 → 1.0.21

package/dist/index.cjs

@@ -294,20 +294,20 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center ";
-  const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
-  const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
+  const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
+  const stateClass = isDragging ? "bg-body-secondary" : "";
+  const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
-    if (onDragOver) onDragOver(e);
+    onDragOver?.(e);
   };
   const handleDragLeave = (e) => {
     e.preventDefault();
-    if (onDragLeave) onDragLeave(e);
+    onDragLeave?.(e);
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    if (onDrop) onDrop(e);
+    onDrop?.(e);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -498,7 +498,7 @@ var UploadProgressList = ({
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
-                className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+                className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
                 style: {
                   width: 64,
                   height: 64
@@ -741,7 +741,7 @@ var DesktopFileIcon = ({
           /* @__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 position-relative",
+              className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
@@ -866,6 +866,31 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-100", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              id: "filePicker",
+              type: "file",
+              multiple: true,
+              className: "d-none",
+              onChange: (e) => {
+                if (!e.target.files) return;
+                onFilesSelected?.(e.target.files);
+                startUploadsIfNeeded(e.target.files);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-primary float-start",
+              onClick: () => document.getElementById("filePicker")?.click(),
+              children: "Browse files\u2026"
+            }
+          ) })
+        ] }),
         /* @__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",
@@ -1079,7 +1104,11 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
       setProgress(0);
       setErrorMessage(null);
       const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(selectedFile, presignedUrl, (p) => setProgress(p));
+      await UploadFileToS3(
+        selectedFile,
+        presignedUrl?.PresignedUrl ?? "",
+        (p) => setProgress(p)
+      );
       setStatus("success");
       onUploadComplete?.(selectedFile, presignedUrl);
     } catch (err) {
@@ -1095,23 +1124,28 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     return "Unknown error during upload.";
   }
   const isUploading = status === "uploading";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { style: { fontWeight: 600 }, children: label }),
+  const dropzoneClasses = [
+    "border",
+    "border-2",
+    "rounded",
+    "p-3",
+    "text-center",
+    "user-select-none",
+    disabled ? "opacity-50" : "cursor-pointer",
+    isDragging ? "bg-info-subtle" : "bg-transparent"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "form-label fw-semibold", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
+        className: dropzoneClasses,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         onClick: handleBrowseClick,
-        style: {
-          border: "2px dashed #ccc",
-          borderRadius: 8,
-          padding: 16,
-          textAlign: "center",
-          cursor: disabled ? "not-allowed" : "pointer",
-          backgroundColor: isDragging ? "#f0f8ff" : "#fafafa"
-        },
+        role: "button",
+        "aria-disabled": disabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
@@ -1119,55 +1153,47 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
               ref: fileInputRef,
               type: "file",
               accept,
-              style: { display: "none" },
+              className: "d-none",
               onChange: handleInputChange,
               disabled
             }
           ),
-          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
             /* @__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", { style: { fontSize: 12, color: "#666" }, children: "Click here to change file or drag a new one." })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__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.jsxs)("div", { className: "small", children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Drag & drop a file here" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "#666" }, children: "or click to browse" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 12 }, children: [
-      "Uploading... ",
-      progress ?? 0,
-      "%",
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    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.jsx)("span", { children: "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",
         {
-          style: {
-            marginTop: 4,
-            height: 6,
-            borderRadius: 999,
-            backgroundColor: "#eee",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "div",
-            {
-              style: {
-                height: "100%",
-                width: `${progress ?? 0}%`,
-                backgroundColor: "#007bff",
-                transition: "width 0.2s ease-out"
-              }
-            }
-          )
+          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", { style: { fontSize: 12, color: "green" }, children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 12, color: "red" }, children: [
+    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
     ] }),
@@ -1177,15 +1203,7 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
         type: "button",
         onClick: handleProcessClick,
         disabled: !selectedFile || isUploading || disabled,
-        style: {
-          padding: "8px 16px",
-          borderRadius: 4,
-          border: "none",
-          backgroundColor: !selectedFile || isUploading || disabled ? "#ccc" : "#007bff",
-          color: "#fff",
-          fontWeight: 600,
-          cursor: !selectedFile || isUploading || disabled ? "not-allowed" : "pointer"
-        },
+        className: "btn btn-primary mt-2",
         children: isUploading ? "Processing..." : "Process"
       }
     )
@@ -1214,7 +1232,8 @@ function HomeContent() {
       "https://localhost:5001"
     );
     const contentType = file.type || "application/octet-stream";
-    return (await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType })))?.PresignedUrl ?? "";
+    const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
+    return result;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_authentication_ui.UserInfoCard, {}),

package/dist/index.d.cts

@@ -132,19 +132,10 @@ interface DesktopFileIconProps {
 declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface SingleFileProcessUploaderProps {
-    /** Called to get a presigned S3 URL for the selected file. */
-    getPresignedUrl: (file: File) => Promise<string>;
-    /**
-     * Called after the upload succeeds.
-     * You can use s3Url (the presigned URL you provided) in another component
-     * or have your backend process the file from S3.
-     */
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    /** Optional: restrict file types, e.g. "image/*" or ".png,.jpg" */
+    getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
+    onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
     accept?: string;
-    /** Optional: label shown above the control */
     label?: string;
-    /** Optional: disable the control entirely */
     disabled?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
@@ -170,10 +161,8 @@ interface UploadDropzoneProps {
     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__default.CSSProperties;
-    /** Custom content to render inside the dropzone */
     children?: React__default.ReactNode;
 }
 declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;

package/dist/index.d.ts

@@ -132,19 +132,10 @@ interface DesktopFileIconProps {
 declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
 
 interface SingleFileProcessUploaderProps {
-    /** Called to get a presigned S3 URL for the selected file. */
-    getPresignedUrl: (file: File) => Promise<string>;
-    /**
-     * Called after the upload succeeds.
-     * You can use s3Url (the presigned URL you provided) in another component
-     * or have your backend process the file from S3.
-     */
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    /** Optional: restrict file types, e.g. "image/*" or ".png,.jpg" */
+    getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
+    onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
     accept?: string;
-    /** Optional: label shown above the control */
     label?: string;
-    /** Optional: disable the control entirely */
     disabled?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
@@ -170,10 +161,8 @@ interface UploadDropzoneProps {
     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__default.CSSProperties;
-    /** Custom content to render inside the dropzone */
     children?: React__default.ReactNode;
 }
 declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;

package/dist/index.js

@@ -251,20 +251,20 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center ";
-  const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
-  const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
+  const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
+  const stateClass = isDragging ? "bg-body-secondary" : "";
+  const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
-    if (onDragOver) onDragOver(e);
+    onDragOver?.(e);
   };
   const handleDragLeave = (e) => {
     e.preventDefault();
-    if (onDragLeave) onDragLeave(e);
+    onDragLeave?.(e);
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    if (onDrop) onDrop(e);
+    onDrop?.(e);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -455,7 +455,7 @@ var UploadProgressList = ({
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+                className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
                 style: {
                   width: 64,
                   height: 64
@@ -708,7 +708,7 @@ var DesktopFileIcon = ({
           /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+              className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
@@ -833,6 +833,31 @@ var UploadContainer = ({
       className: "w-100",
       style: { minHeight: "260px", alignItems: "stretch" },
       children: [
+        /* @__PURE__ */ jsxs3("div", { className: "w-100", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              id: "filePicker",
+              type: "file",
+              multiple: true,
+              className: "d-none",
+              onChange: (e) => {
+                if (!e.target.files) return;
+                onFilesSelected?.(e.target.files);
+                startUploadsIfNeeded(e.target.files);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { className: "text-start", children: /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "btn btn-primary float-start",
+              onClick: () => document.getElementById("filePicker")?.click(),
+              children: "Browse files\u2026"
+            }
+          ) })
+        ] }),
         /* @__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",
@@ -1046,7 +1071,11 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
       setProgress(0);
       setErrorMessage(null);
       const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(selectedFile, presignedUrl, (p) => setProgress(p));
+      await UploadFileToS3(
+        selectedFile,
+        presignedUrl?.PresignedUrl ?? "",
+        (p) => setProgress(p)
+      );
       setStatus("success");
       onUploadComplete?.(selectedFile, presignedUrl);
     } catch (err) {
@@ -1062,23 +1091,28 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     return "Unknown error during upload.";
   }
   const isUploading = status === "uploading";
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    label && /* @__PURE__ */ jsx6("label", { style: { fontWeight: 600 }, children: label }),
+  const dropzoneClasses = [
+    "border",
+    "border-2",
+    "rounded",
+    "p-3",
+    "text-center",
+    "user-select-none",
+    disabled ? "opacity-50" : "cursor-pointer",
+    isDragging ? "bg-info-subtle" : "bg-transparent"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className: "d-flex flex-column gap-2", children: [
+    label && /* @__PURE__ */ jsx6("label", { className: "form-label fw-semibold", children: label }),
     /* @__PURE__ */ jsxs4(
       "div",
       {
+        className: dropzoneClasses,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         onClick: handleBrowseClick,
-        style: {
-          border: "2px dashed #ccc",
-          borderRadius: 8,
-          padding: 16,
-          textAlign: "center",
-          cursor: disabled ? "not-allowed" : "pointer",
-          backgroundColor: isDragging ? "#f0f8ff" : "#fafafa"
-        },
+        role: "button",
+        "aria-disabled": disabled,
         children: [
           /* @__PURE__ */ jsx6(
             "input",
@@ -1086,55 +1120,47 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
               ref: fileInputRef,
               type: "file",
               accept,
-              style: { display: "none" },
+              className: "d-none",
               onChange: handleInputChange,
               disabled
             }
           ),
-          selectedFile ? /* @__PURE__ */ jsxs4("div", { children: [
+          selectedFile ? /* @__PURE__ */ jsxs4("div", { className: "small", children: [
             /* @__PURE__ */ jsxs4("div", { children: [
               /* @__PURE__ */ jsx6("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#666" }, children: "Click here to change file or drag a new one." })
-          ] }) : /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "Click here to change file or drag a new one." })
+          ] }) : /* @__PURE__ */ jsxs4("div", { className: "small", children: [
             /* @__PURE__ */ jsx6("div", { children: "Drag & drop a file here" }),
-            /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#666" }, children: "or click to browse" })
+            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12 }, children: [
-      "Uploading... ",
-      progress ?? 0,
-      "%",
-      /* @__PURE__ */ jsx6(
+    isUploading && /* @__PURE__ */ jsxs4("div", { className: "small", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "d-flex justify-content-between mb-1", children: [
+        /* @__PURE__ */ jsx6("span", { children: "Uploading..." }),
+        /* @__PURE__ */ jsxs4("span", { children: [
+          progress ?? 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "progress", children: /* @__PURE__ */ jsx6(
         "div",
         {
-          style: {
-            marginTop: 4,
-            height: 6,
-            borderRadius: 999,
-            backgroundColor: "#eee",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsx6(
-            "div",
-            {
-              style: {
-                height: "100%",
-                width: `${progress ?? 0}%`,
-                backgroundColor: "#007bff",
-                transition: "width 0.2s ease-out"
-              }
-            }
-          )
+          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", { style: { fontSize: 12, color: "green" }, children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12, color: "red" }, children: [
+    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
     ] }),
@@ -1144,15 +1170,7 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
         type: "button",
         onClick: handleProcessClick,
         disabled: !selectedFile || isUploading || disabled,
-        style: {
-          padding: "8px 16px",
-          borderRadius: 4,
-          border: "none",
-          backgroundColor: !selectedFile || isUploading || disabled ? "#ccc" : "#007bff",
-          color: "#fff",
-          fontWeight: 600,
-          cursor: !selectedFile || isUploading || disabled ? "not-allowed" : "pointer"
-        },
+        className: "btn btn-primary mt-2",
         children: isUploading ? "Processing..." : "Process"
       }
     )
@@ -1186,7 +1204,8 @@ function HomeContent() {
       "https://localhost:5001"
     );
     const contentType = file.type || "application/octet-stream";
-    return (await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType })))?.PresignedUrl ?? "";
+    const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
+    return result;
   }
   return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx7(UserInfoCard, {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@sparkstudio/authentication-ui": "^1.0.29",
-    "@sparkstudio/common-ui": "^1.0.14",
+    "@sparkstudio/common-ui": "^1.0.26",
     "barrelsby": "^2.8.1"
   },
   "devDependencies": {