@sparkstudio/storage-ui 1.0.7 → 1.0.8

package/dist/index.cjs

@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AWSCredentialsDTO: () => AWSCredentialsDTO,
+  AWSPresignedUrlDTO: () => AWSPresignedUrlDTO,
   Container: () => Container,
   ContainerDTO: () => ContainerDTO,
   ContainerType: () => ContainerType,
@@ -123,8 +123,8 @@ var Container = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
-  async GetUploadCredentials() {
-    const url = `${this.baseUrl}/api/Container/GetUploadCredentials`;
+  async GetPreSignedUrl(fileName, size, contentType) {
+    const url = `${this.baseUrl}/api/Container/GetPreSignedUrl/` + fileName + `/` + size + `/` + contentType;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
       method: "GET",
@@ -157,19 +157,15 @@ var SparkStudioStorageSDK = class {
   }
 };
 
-// src/api/DTOs/AWSCredentialsDTO.ts
-var AWSCredentialsDTO = class {
-  AccessKeyId;
-  SecretAccessKey;
-  SessionToken;
-  BucketName;
-  Region;
+// src/api/DTOs/AWSPresignedUrlDTO.ts
+var AWSPresignedUrlDTO = class {
+  PresignedUrl;
+  PublicUrl;
+  Key;
   constructor(init) {
-    this.AccessKeyId = init.AccessKeyId;
-    this.SecretAccessKey = init.SecretAccessKey;
-    this.SessionToken = init.SessionToken;
-    this.BucketName = init.BucketName;
-    this.Region = init.Region;
+    this.PresignedUrl = init.PresignedUrl;
+    this.PublicUrl = init.PublicUrl;
+    this.Key = init.Key;
   }
 };
 
@@ -178,6 +174,7 @@ var ContainerDTO = class {
   Id;
   ContainerType;
   Name;
+  ContentType;
   CreatedDate;
   FileSize;
   UserId;
@@ -186,6 +183,7 @@ var ContainerDTO = class {
     this.Id = init.Id;
     this.ContainerType = init.ContainerType;
     this.Name = init.Name;
+    this.ContentType = init.ContentType;
     this.CreatedDate = init.CreatedDate;
     this.FileSize = init.FileSize;
     this.UserId = init.UserId;
@@ -209,10 +207,66 @@ var UploadContainer = ({
   description = "Drag and drop files here, or click the button to browse.",
   multiple = true,
   accept,
-  onFilesSelected
+  onFilesSelected,
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
 }) => {
   const [isDragging, setIsDragging] = (0, import_react.useState)(false);
   const [fileNames, setFileNames] = (0, import_react.useState)([]);
+  const [uploads, setUploads] = (0, import_react.useState)([]);
+  const startUploadsIfNeeded = (files) => {
+    if (!autoUpload || !getPresignedUrl) return;
+    const newUploads = Array.from(files).map((file) => ({
+      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
+      file,
+      progress: 0,
+      status: "pending"
+    }));
+    setUploads((prev) => [...prev, ...newUploads]);
+    newUploads.forEach((upload) => {
+      uploadFile(upload);
+    });
+  };
+  const uploadFile = async (upload) => {
+    setUploads(
+      (prev) => prev.map(
+        (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
+      )
+    );
+    try {
+      if (!getPresignedUrl) {
+        throw new Error("getPresignedUrl is not provided.");
+      }
+      const presignedUrl = await getPresignedUrl(upload.file);
+      await uploadFileToS3(upload.file, presignedUrl, (progress) => {
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? { ...u, progress } : u
+          )
+        );
+      });
+      const fileUrl = presignedUrl.split("?")[0];
+      setUploads(
+        (prev) => prev.map(
+          (u) => u.id === upload.id ? { ...u, status: "success", progress: 100, s3Url: fileUrl } : u
+        )
+      );
+      onUploadComplete?.(upload.file, fileUrl);
+    } catch (err) {
+      let message = "Upload failed";
+      if (err instanceof Error) {
+        message = err.message;
+      }
+      setUploads(
+        (prev) => prev.map(
+          (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+        )
+      );
+      onUploadError?.(upload.file, err instanceof Error ? err : new Error(message));
+    }
+  };
   const handleDragOver = (e) => {
     e.preventDefault();
     setIsDragging(true);
@@ -228,12 +282,14 @@ var UploadContainer = ({
     if (!files || files.length === 0) return;
     setFileNames(Array.from(files).map((f) => f.name));
     onFilesSelected?.(files);
+    startUploadsIfNeeded(files);
   };
   const handleFileChange = (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
     setFileNames(Array.from(files).map((f) => f.name));
     onFilesSelected?.(files);
+    startUploadsIfNeeded(files);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "container my-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-body", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "card-title mb-2", children: title }),
@@ -272,9 +328,56 @@ var UploadContainer = ({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "small text-muted", children: "Selected:" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: name }, name)) })
       ] })
-    ] })
+    ] }),
+    uploads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "d-flex justify-content-between small mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: u.file.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
+          role: "progressbar",
+          style: { width: `${u.progress}%` },
+          "aria-valuenow": u.progress,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100
+        }
+      ) }),
+      u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
+    ] }, u.id)) })
   ] }) }) });
 };
+async function uploadFileToS3(file, presignedUrl, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", presignedUrl);
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      const percent = Math.round(event.loaded / event.total * 100);
+      onProgress(percent);
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(
+          new Error(`S3 upload failed with status ${xhr.status}: ${xhr.statusText}`)
+        );
+      }
+    };
+    xhr.onerror = () => {
+      reject(new Error("Network error while uploading to S3"));
+    };
+    xhr.setRequestHeader(
+      "Content-Type",
+      file.type || "application/octet-stream"
+    );
+    xhr.send(file);
+  });
+}
 
 // src/views/HomeView.tsx
 var import_authentication_ui = require("@sparkstudio/authentication-ui");
@@ -283,6 +386,11 @@ function HomeView() {
   function handleOnLoginSuccess(user) {
     alert(user?.Id);
   }
+  const getPresignedUrl = async (file) => {
+    const sdk = new SparkStudioStorageSDK("https://localhost:5001");
+    const result = await sdk.container.GetPreSignedUrl(file.name, file.size, encodeURIComponent(file.type));
+    return result?.PresignedUrl ?? "";
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_authentication_ui.AuthenticatorProvider,
     {
@@ -292,14 +400,30 @@ function HomeView() {
       onLoginSuccess: handleOnLoginSuccess,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_authentication_ui.UserInfoCard, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UploadContainer, {})
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          UploadContainer,
+          {
+            title: "Upload your files to S3",
+            description: "Drag & drop or browse files. Each file will upload with its own progress bar.",
+            multiple: true,
+            accept: "*/*",
+            autoUpload: true,
+            getPresignedUrl,
+            onUploadComplete: (file, s3Url) => {
+              console.log("Uploaded", file.name, "to", s3Url);
+            },
+            onUploadError: (file, error) => {
+              console.error("Failed to upload", file.name, error);
+            }
+          }
+        )
       ]
     }
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AWSCredentialsDTO,
+  AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
   ContainerType,

package/dist/index.d.cts

@@ -14,6 +14,7 @@ interface IContainerDTO {
     Id: string;
     ContainerType: ContainerType;
     Name?: string;
+    ContentType?: string;
     CreatedDate: string;
     FileSize: number;
     UserId: string;
@@ -24,6 +25,7 @@ declare class ContainerDTO implements IContainerDTO {
     Id: string;
     ContainerType: ContainerType;
     Name?: string;
+    ContentType?: string;
     CreatedDate: string;
     FileSize: number;
     UserId: string;
@@ -32,23 +34,19 @@ declare class ContainerDTO implements IContainerDTO {
 }
 
 /**
- * Represents an Auto-generated model for AWSCredentialsDTO.
+ * Represents an Auto-generated model for AWSPresignedUrlDTO.
  */
-interface IAWSCredentialsDTO {
-    AccessKeyId?: string;
-    SecretAccessKey?: string;
-    SessionToken?: string;
-    BucketName?: string;
-    Region?: string;
+interface IAWSPresignedUrlDTO {
+    PresignedUrl?: string;
+    PublicUrl?: string;
+    Key?: string;
 }
-type AWSCredentialsDTOInit = Partial<IAWSCredentialsDTO>;
-declare class AWSCredentialsDTO implements IAWSCredentialsDTO {
-    AccessKeyId?: string;
-    SecretAccessKey?: string;
-    SessionToken?: string;
-    BucketName?: string;
-    Region?: string;
-    constructor(init: AWSCredentialsDTOInit);
+type AWSPresignedUrlDTOInit = Partial<IAWSPresignedUrlDTO>;
+declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
+    PresignedUrl?: string;
+    PublicUrl?: string;
+    Key?: string;
+    constructor(init: AWSPresignedUrlDTOInit);
 }
 
 /**
@@ -63,7 +61,7 @@ declare class Container {
     Create(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     Update(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     Delete(id: string): Promise<ContainerDTO>;
-    GetUploadCredentials(): Promise<AWSCredentialsDTO>;
+    GetPreSignedUrl(fileName: string, size: number, contentType: string): Promise<AWSPresignedUrlDTO>;
 }
 
 /**
@@ -89,9 +87,28 @@ interface UploadContainerProps {
     multiple?: boolean;
     accept?: string;
     onFilesSelected?: (files: FileList) => void;
+    /**
+     * When true, the component will immediately start uploading to S3
+     * using getPresignedUrl for each file.
+     */
+    autoUpload?: boolean;
+    /**
+     * Your function that returns a pre-signed URL for a given file.
+     * Typically calls your backend: /api/uploads/presign
+     */
+    getPresignedUrl?: (file: File) => Promise<string>;
+    /**
+     * Called when a file has successfully finished uploading.
+     * s3Url is usually the final S3 object URL or key (depends on your backend).
+     */
+    onUploadComplete?: (file: File, s3Url: string) => void;
+    /**
+     * Called when a file upload fails.
+     */
+    onUploadError?: (file: File, error: Error) => void;
 }
 declare const UploadContainer: React.FC<UploadContainerProps>;
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSCredentialsDTO, Container, ContainerDTO, ContainerType, Home, HomeView, type IAWSCredentialsDTO, type IContainerDTO, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface IContainerDTO {
     Id: string;
     ContainerType: ContainerType;
     Name?: string;
+    ContentType?: string;
     CreatedDate: string;
     FileSize: number;
     UserId: string;
@@ -24,6 +25,7 @@ declare class ContainerDTO implements IContainerDTO {
     Id: string;
     ContainerType: ContainerType;
     Name?: string;
+    ContentType?: string;
     CreatedDate: string;
     FileSize: number;
     UserId: string;
@@ -32,23 +34,19 @@ declare class ContainerDTO implements IContainerDTO {
 }
 
 /**
- * Represents an Auto-generated model for AWSCredentialsDTO.
+ * Represents an Auto-generated model for AWSPresignedUrlDTO.
  */
-interface IAWSCredentialsDTO {
-    AccessKeyId?: string;
-    SecretAccessKey?: string;
-    SessionToken?: string;
-    BucketName?: string;
-    Region?: string;
+interface IAWSPresignedUrlDTO {
+    PresignedUrl?: string;
+    PublicUrl?: string;
+    Key?: string;
 }
-type AWSCredentialsDTOInit = Partial<IAWSCredentialsDTO>;
-declare class AWSCredentialsDTO implements IAWSCredentialsDTO {
-    AccessKeyId?: string;
-    SecretAccessKey?: string;
-    SessionToken?: string;
-    BucketName?: string;
-    Region?: string;
-    constructor(init: AWSCredentialsDTOInit);
+type AWSPresignedUrlDTOInit = Partial<IAWSPresignedUrlDTO>;
+declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
+    PresignedUrl?: string;
+    PublicUrl?: string;
+    Key?: string;
+    constructor(init: AWSPresignedUrlDTOInit);
 }
 
 /**
@@ -63,7 +61,7 @@ declare class Container {
     Create(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     Update(containerDTO: ContainerDTO): Promise<ContainerDTO>;
     Delete(id: string): Promise<ContainerDTO>;
-    GetUploadCredentials(): Promise<AWSCredentialsDTO>;
+    GetPreSignedUrl(fileName: string, size: number, contentType: string): Promise<AWSPresignedUrlDTO>;
 }
 
 /**
@@ -89,9 +87,28 @@ interface UploadContainerProps {
     multiple?: boolean;
     accept?: string;
     onFilesSelected?: (files: FileList) => void;
+    /**
+     * When true, the component will immediately start uploading to S3
+     * using getPresignedUrl for each file.
+     */
+    autoUpload?: boolean;
+    /**
+     * Your function that returns a pre-signed URL for a given file.
+     * Typically calls your backend: /api/uploads/presign
+     */
+    getPresignedUrl?: (file: File) => Promise<string>;
+    /**
+     * Called when a file has successfully finished uploading.
+     * s3Url is usually the final S3 object URL or key (depends on your backend).
+     */
+    onUploadComplete?: (file: File, s3Url: string) => void;
+    /**
+     * Called when a file upload fails.
+     */
+    onUploadError?: (file: File, error: Error) => void;
 }
 declare const UploadContainer: React.FC<UploadContainerProps>;
 
 declare function HomeView(): react_jsx_runtime.JSX.Element;
 
-export { AWSCredentialsDTO, Container, ContainerDTO, ContainerType, Home, HomeView, type IAWSCredentialsDTO, type IContainerDTO, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps };
+export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, SparkStudioStorageSDK, UploadContainer, type UploadContainerProps };

package/dist/index.js

@@ -90,8 +90,8 @@ var Container = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
-  async GetUploadCredentials() {
-    const url = `${this.baseUrl}/api/Container/GetUploadCredentials`;
+  async GetPreSignedUrl(fileName, size, contentType) {
+    const url = `${this.baseUrl}/api/Container/GetPreSignedUrl/` + fileName + `/` + size + `/` + contentType;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
       method: "GET",
@@ -124,19 +124,15 @@ var SparkStudioStorageSDK = class {
   }
 };
 
-// src/api/DTOs/AWSCredentialsDTO.ts
-var AWSCredentialsDTO = class {
-  AccessKeyId;
-  SecretAccessKey;
-  SessionToken;
-  BucketName;
-  Region;
+// src/api/DTOs/AWSPresignedUrlDTO.ts
+var AWSPresignedUrlDTO = class {
+  PresignedUrl;
+  PublicUrl;
+  Key;
   constructor(init) {
-    this.AccessKeyId = init.AccessKeyId;
-    this.SecretAccessKey = init.SecretAccessKey;
-    this.SessionToken = init.SessionToken;
-    this.BucketName = init.BucketName;
-    this.Region = init.Region;
+    this.PresignedUrl = init.PresignedUrl;
+    this.PublicUrl = init.PublicUrl;
+    this.Key = init.Key;
   }
 };
 
@@ -145,6 +141,7 @@ var ContainerDTO = class {
   Id;
   ContainerType;
   Name;
+  ContentType;
   CreatedDate;
   FileSize;
   UserId;
@@ -153,6 +150,7 @@ var ContainerDTO = class {
     this.Id = init.Id;
     this.ContainerType = init.ContainerType;
     this.Name = init.Name;
+    this.ContentType = init.ContentType;
     this.CreatedDate = init.CreatedDate;
     this.FileSize = init.FileSize;
     this.UserId = init.UserId;
@@ -176,10 +174,66 @@ var UploadContainer = ({
   description = "Drag and drop files here, or click the button to browse.",
   multiple = true,
   accept,
-  onFilesSelected
+  onFilesSelected,
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const [fileNames, setFileNames] = useState([]);
+  const [uploads, setUploads] = useState([]);
+  const startUploadsIfNeeded = (files) => {
+    if (!autoUpload || !getPresignedUrl) return;
+    const newUploads = Array.from(files).map((file) => ({
+      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
+      file,
+      progress: 0,
+      status: "pending"
+    }));
+    setUploads((prev) => [...prev, ...newUploads]);
+    newUploads.forEach((upload) => {
+      uploadFile(upload);
+    });
+  };
+  const uploadFile = async (upload) => {
+    setUploads(
+      (prev) => prev.map(
+        (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
+      )
+    );
+    try {
+      if (!getPresignedUrl) {
+        throw new Error("getPresignedUrl is not provided.");
+      }
+      const presignedUrl = await getPresignedUrl(upload.file);
+      await uploadFileToS3(upload.file, presignedUrl, (progress) => {
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? { ...u, progress } : u
+          )
+        );
+      });
+      const fileUrl = presignedUrl.split("?")[0];
+      setUploads(
+        (prev) => prev.map(
+          (u) => u.id === upload.id ? { ...u, status: "success", progress: 100, s3Url: fileUrl } : u
+        )
+      );
+      onUploadComplete?.(upload.file, fileUrl);
+    } catch (err) {
+      let message = "Upload failed";
+      if (err instanceof Error) {
+        message = err.message;
+      }
+      setUploads(
+        (prev) => prev.map(
+          (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+        )
+      );
+      onUploadError?.(upload.file, err instanceof Error ? err : new Error(message));
+    }
+  };
   const handleDragOver = (e) => {
     e.preventDefault();
     setIsDragging(true);
@@ -195,12 +249,14 @@ var UploadContainer = ({
     if (!files || files.length === 0) return;
     setFileNames(Array.from(files).map((f) => f.name));
     onFilesSelected?.(files);
+    startUploadsIfNeeded(files);
   };
   const handleFileChange = (e) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
     setFileNames(Array.from(files).map((f) => f.name));
     onFilesSelected?.(files);
+    startUploadsIfNeeded(files);
   };
   return /* @__PURE__ */ jsx("div", { className: "container my-3", children: /* @__PURE__ */ jsx("div", { className: "card shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "card-body", children: [
     /* @__PURE__ */ jsx("h5", { className: "card-title mb-2", children: title }),
@@ -239,9 +295,56 @@ var UploadContainer = ({
         /* @__PURE__ */ jsx("div", { className: "small text-muted", children: "Selected:" }),
         /* @__PURE__ */ jsx("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ jsx("li", { children: name }, name)) })
       ] })
-    ] })
+    ] }),
+    uploads.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between small mb-1", children: [
+        /* @__PURE__ */ jsx("span", { children: u.file.name }),
+        /* @__PURE__ */ jsx("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
+          role: "progressbar",
+          style: { width: `${u.progress}%` },
+          "aria-valuenow": u.progress,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100
+        }
+      ) }),
+      u.status === "error" && /* @__PURE__ */ jsx("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
+    ] }, u.id)) })
   ] }) }) });
 };
+async function uploadFileToS3(file, presignedUrl, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", presignedUrl);
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      const percent = Math.round(event.loaded / event.total * 100);
+      onProgress(percent);
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(
+          new Error(`S3 upload failed with status ${xhr.status}: ${xhr.statusText}`)
+        );
+      }
+    };
+    xhr.onerror = () => {
+      reject(new Error("Network error while uploading to S3"));
+    };
+    xhr.setRequestHeader(
+      "Content-Type",
+      file.type || "application/octet-stream"
+    );
+    xhr.send(file);
+  });
+}
 
 // src/views/HomeView.tsx
 import { AppSettings, AuthenticatorProvider, UserInfoCard } from "@sparkstudio/authentication-ui";
@@ -250,6 +353,11 @@ function HomeView() {
   function handleOnLoginSuccess(user) {
     alert(user?.Id);
   }
+  const getPresignedUrl = async (file) => {
+    const sdk = new SparkStudioStorageSDK("https://localhost:5001");
+    const result = await sdk.container.GetPreSignedUrl(file.name, file.size, encodeURIComponent(file.type));
+    return result?.PresignedUrl ?? "";
+  };
   return /* @__PURE__ */ jsxs2(
     AuthenticatorProvider,
     {
@@ -259,13 +367,29 @@ function HomeView() {
       onLoginSuccess: handleOnLoginSuccess,
       children: [
         /* @__PURE__ */ jsx2(UserInfoCard, {}),
-        /* @__PURE__ */ jsx2(UploadContainer, {})
+        /* @__PURE__ */ jsx2(
+          UploadContainer,
+          {
+            title: "Upload your files to S3",
+            description: "Drag & drop or browse files. Each file will upload with its own progress bar.",
+            multiple: true,
+            accept: "*/*",
+            autoUpload: true,
+            getPresignedUrl,
+            onUploadComplete: (file, s3Url) => {
+              console.log("Uploaded", file.name, "to", s3Url);
+            },
+            onUploadError: (file, error) => {
+              console.error("Failed to upload", file.name, error);
+            }
+          }
+        )
       ]
     }
   );
 }
 export {
-  AWSCredentialsDTO,
+  AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
   ContainerType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -28,13 +28,15 @@
     "build": "npm run generateIndex && tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.lib.json && sass --load-path=node_modules src/index.scss dist/index.css",
     "lint": "eslint .",
     "preview": "vite preview",
-    "start": "vite"
+    "start": "npm run generateIndex && vite"
   },
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.958.0",
+    "@aws-sdk/s3-request-presigner": "^3.958.0",
     "@sparkstudio/authentication-ui": "^1.0.29",
     "@sparkstudio/common-ui": "^1.0.5",
     "barrelsby": "^2.8.1"