@sparkstudio/storage-ui 1.0.18 → 1.0.19

package/dist/index.cjs

@@ -29,7 +29,9 @@ __export(index_exports, {
   Home: () => Home,
   HomeView: () => HomeView,
   S3: () => S3,
+  SingleFileProcessUploader: () => SingleFileProcessUploader,
   SparkStudioStorageSDK: () => SparkStudioStorageSDK,
+  TemporaryFileDTO: () => TemporaryFileDTO,
   UploadContainer: () => UploadContainer,
   UploadDropzone: () => UploadDropzone,
   UploadFileToS3: () => UploadFileToS3,
@@ -191,6 +193,21 @@ var S3 = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
+  async GetTemporaryPreSignedUrl(temporaryFileDTO) {
+    const url = `${this.baseUrl}/api/S3/GetTemporaryPreSignedUrl`;
+    const token = localStorage.getItem("auth_token");
+    const requestOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token && { Authorization: `Bearer ${token}` }
+      },
+      body: JSON.stringify(temporaryFileDTO)
+    };
+    const response = await fetch(url, requestOptions);
+    if (!response.ok) throw new Error(await response.text());
+    return await response.json();
+  }
 };
 
 // src/api/SparkStudioStorageSDK.ts
@@ -241,6 +258,16 @@ var ContainerDTO = class {
   }
 };
 
+// src/api/DTOs/TemporaryFileDTO.ts
+var TemporaryFileDTO = class {
+  Name;
+  ContentType;
+  constructor(init) {
+    this.Name = init.Name;
+    this.ContentType = init.ContentType;
+  }
+};
+
 // src/api/Enums/ContainerType.ts
 var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
   ContainerType2[ContainerType2["File"] = 0] = "File";
@@ -1003,31 +1030,214 @@ var ContainerUploadPanel = ({
   );
 };
 
+// src/components/SingleFileProcessUploader.tsx
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, label, disabled }) => {
+  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];
+    setSelectedFile(file);
+    setStatus("idle");
+    setProgress(null);
+    setErrorMessage(null);
+  }, []);
+  const handleBrowseClick = () => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  };
+  const handleInputChange = (e) => {
+    handleFilesSelected(e.target.files);
+    e.target.value = "";
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    setIsDragging(false);
+    const files = e.dataTransfer.files;
+    handleFilesSelected(files);
+  };
+  const handleProcessClick = async () => {
+    if (!selectedFile || disabled) return;
+    try {
+      setStatus("uploading");
+      setProgress(0);
+      setErrorMessage(null);
+      const presignedUrl = await getPresignedUrl(selectedFile);
+      await UploadFileToS3(selectedFile, presignedUrl, (p) => setProgress(p));
+      setStatus("success");
+      onUploadComplete?.(selectedFile, presignedUrl);
+    } catch (err) {
+      const message = getErrorMessage(err);
+      console.error("Upload failed:", message);
+      setStatus("error");
+      setErrorMessage(message);
+    }
+  };
+  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";
+  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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        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"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              style: { display: "none" },
+              onChange: handleInputChange,
+              disabled
+            }
+          ),
+          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { 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", { children: "Drag & drop a file here" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "#666" }, 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)(
+        "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"
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    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: [
+      "Upload failed: ",
+      errorMessage
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        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"
+        },
+        children: isUploading ? "Processing..." : "Process"
+      }
+    )
+  ] });
+};
+
 // src/views/HomeView.tsx
 var import_authentication_ui = require("@sparkstudio/authentication-ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function HomeView() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)(HomeContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HomeContent, {})
     }
   );
 }
 function HomeContent() {
   const { user } = (0, import_authentication_ui.useUser)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_authentication_ui.UserInfoCard, {}),
-    user && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      ContainerUploadPanel,
-      {
-        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
-        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-      }
-    )
+  async function getPresignedUrlFromApi(file) {
+    const res = new SparkStudioStorageSDK(
+      // "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      "https://localhost:5001"
+    );
+    const contentType = file.type || "application/octet-stream";
+    return (await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType })))?.PresignedUrl ?? "";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_authentication_ui.UserInfoCard, {}),
+    user && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        SingleFileProcessUploader,
+        {
+          label: "Upload a file to process",
+          accept: "*/*",
+          getPresignedUrl: getPresignedUrlFromApi,
+          onUploadComplete: (file, s3Url) => {
+            console.log("Uploaded:", file.name, "S3 URL:", s3Url);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ContainerUploadPanel,
+        {
+          containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+          storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+        }
+      )
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -1041,7 +1251,9 @@ function HomeContent() {
   Home,
   HomeView,
   S3,
+  SingleFileProcessUploader,
   SparkStudioStorageSDK,
+  TemporaryFileDTO,
   UploadContainer,
   UploadDropzone,
   UploadFileToS3,

package/dist/index.d.cts

@@ -75,6 +75,20 @@ declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
     constructor(init: AWSPresignedUrlDTOInit);
 }
 
+/**
+ * Represents an Auto-generated model for TemporaryFileDTO.
+ */
+interface ITemporaryFileDTO {
+    Name?: string;
+    ContentType?: string;
+}
+type TemporaryFileDTOInit = Partial<ITemporaryFileDTO>;
+declare class TemporaryFileDTO implements ITemporaryFileDTO {
+    Name?: string;
+    ContentType?: string;
+    constructor(init: TemporaryFileDTOInit);
+}
+
 /**
 * Auto-generated client for the S3 controller.
 */
@@ -83,6 +97,7 @@ declare class S3 {
     constructor(baseUrl: string);
     DeleteS3(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     GetPreSignedUrl(containerDTO: ContainerDTO): Promise<AWSPresignedUrlDTO>;
+    GetTemporaryPreSignedUrl(temporaryFileDTO: TemporaryFileDTO): Promise<AWSPresignedUrlDTO>;
 }
 
 /**
@@ -116,6 +131,24 @@ 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" */
+    accept?: string;
+    /** Optional: label shown above the control */
+    label?: string;
+    /** Optional: disable the control entirely */
+    disabled?: boolean;
+}
+declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
+
 interface UploadContainerProps {
     multiple?: boolean;
     accept?: string;
@@ -192,4 +225,4 @@ declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplet
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, S3, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };

package/dist/index.d.ts

@@ -75,6 +75,20 @@ declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
     constructor(init: AWSPresignedUrlDTOInit);
 }
 
+/**
+ * Represents an Auto-generated model for TemporaryFileDTO.
+ */
+interface ITemporaryFileDTO {
+    Name?: string;
+    ContentType?: string;
+}
+type TemporaryFileDTOInit = Partial<ITemporaryFileDTO>;
+declare class TemporaryFileDTO implements ITemporaryFileDTO {
+    Name?: string;
+    ContentType?: string;
+    constructor(init: TemporaryFileDTOInit);
+}
+
 /**
 * Auto-generated client for the S3 controller.
 */
@@ -83,6 +97,7 @@ declare class S3 {
     constructor(baseUrl: string);
     DeleteS3(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     GetPreSignedUrl(containerDTO: ContainerDTO): Promise<AWSPresignedUrlDTO>;
+    GetTemporaryPreSignedUrl(temporaryFileDTO: TemporaryFileDTO): Promise<AWSPresignedUrlDTO>;
 }
 
 /**
@@ -116,6 +131,24 @@ 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" */
+    accept?: string;
+    /** Optional: label shown above the control */
+    label?: string;
+    /** Optional: disable the control entirely */
+    disabled?: boolean;
+}
+declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
+
 interface UploadContainerProps {
     multiple?: boolean;
     accept?: string;
@@ -192,4 +225,4 @@ declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplet
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, S3, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };

package/dist/index.js

@@ -150,6 +150,21 @@ var S3 = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
+  async GetTemporaryPreSignedUrl(temporaryFileDTO) {
+    const url = `${this.baseUrl}/api/S3/GetTemporaryPreSignedUrl`;
+    const token = localStorage.getItem("auth_token");
+    const requestOptions = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...token && { Authorization: `Bearer ${token}` }
+      },
+      body: JSON.stringify(temporaryFileDTO)
+    };
+    const response = await fetch(url, requestOptions);
+    if (!response.ok) throw new Error(await response.text());
+    return await response.json();
+  }
 };
 
 // src/api/SparkStudioStorageSDK.ts
@@ -200,6 +215,16 @@ var ContainerDTO = class {
   }
 };
 
+// src/api/DTOs/TemporaryFileDTO.ts
+var TemporaryFileDTO = class {
+  Name;
+  ContentType;
+  constructor(init) {
+    this.Name = init.Name;
+    this.ContentType = init.ContentType;
+  }
+};
+
 // src/api/Enums/ContainerType.ts
 var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
   ContainerType2[ContainerType2["File"] = 0] = "File";
@@ -972,6 +997,168 @@ 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, label, disabled }) => {
+  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];
+    setSelectedFile(file);
+    setStatus("idle");
+    setProgress(null);
+    setErrorMessage(null);
+  }, []);
+  const handleBrowseClick = () => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  };
+  const handleInputChange = (e) => {
+    handleFilesSelected(e.target.files);
+    e.target.value = "";
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (disabled) return;
+    setIsDragging(false);
+    const files = e.dataTransfer.files;
+    handleFilesSelected(files);
+  };
+  const handleProcessClick = async () => {
+    if (!selectedFile || disabled) return;
+    try {
+      setStatus("uploading");
+      setProgress(0);
+      setErrorMessage(null);
+      const presignedUrl = await getPresignedUrl(selectedFile);
+      await UploadFileToS3(selectedFile, presignedUrl, (p) => setProgress(p));
+      setStatus("success");
+      onUploadComplete?.(selectedFile, presignedUrl);
+    } catch (err) {
+      const message = getErrorMessage(err);
+      console.error("Upload failed:", message);
+      setStatus("error");
+      setErrorMessage(message);
+    }
+  };
+  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";
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    label && /* @__PURE__ */ jsx6("label", { style: { fontWeight: 600 }, children: label }),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        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"
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              style: { display: "none" },
+              onChange: handleInputChange,
+              disabled
+            }
+          ),
+          selectedFile ? /* @__PURE__ */ jsxs4("div", { 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", { children: "Drag & drop a file here" }),
+            /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#666" }, children: "or click to browse" })
+          ] })
+        ]
+      }
+    ),
+    isUploading && /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12 }, children: [
+      "Uploading... ",
+      progress ?? 0,
+      "%",
+      /* @__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"
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    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: [
+      "Upload failed: ",
+      errorMessage
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        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"
+        },
+        children: isUploading ? "Processing..." : "Process"
+      }
+    )
+  ] });
+};
+
 // src/views/HomeView.tsx
 import {
   AppSettings,
@@ -979,29 +1166,50 @@ import {
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function HomeView() {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     AuthenticatorProvider,
     {
       googleClientId: AppSettings.GoogleClientId,
       authenticationUrl: AppSettings.AuthenticationUrl,
       accountsUrl: AppSettings.AccountsUrl,
-      children: /* @__PURE__ */ jsx6(HomeContent, {})
+      children: /* @__PURE__ */ jsx7(HomeContent, {})
     }
   );
 }
 function HomeContent() {
   const { user } = useUser();
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(UserInfoCard, {}),
-    user && /* @__PURE__ */ jsx6(
-      ContainerUploadPanel,
-      {
-        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
-        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-      }
-    )
+  async function getPresignedUrlFromApi(file) {
+    const res = new SparkStudioStorageSDK(
+      // "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      "https://localhost:5001"
+    );
+    const contentType = file.type || "application/octet-stream";
+    return (await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType })))?.PresignedUrl ?? "";
+  }
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(UserInfoCard, {}),
+    user && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx7(
+        SingleFileProcessUploader,
+        {
+          label: "Upload a file to process",
+          accept: "*/*",
+          getPresignedUrl: getPresignedUrlFromApi,
+          onUploadComplete: (file, s3Url) => {
+            console.log("Uploaded:", file.name, "S3 URL:", s3Url);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        ContainerUploadPanel,
+        {
+          containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+          storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+        }
+      )
+    ] })
   ] });
 }
 export {
@@ -1014,7 +1222,9 @@ export {
   Home,
   HomeView,
   S3,
+  SingleFileProcessUploader,
   SparkStudioStorageSDK,
+  TemporaryFileDTO,
   UploadContainer,
   UploadDropzone,
   UploadFileToS3,

package/package.json

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