Asset API Tutorial | Webflow API

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Component setup

Start by setting up the React component with state variables for tracking upload progress and status:

isUploading: Boolean flag to track upload state and disable UI elements
progress: Number to track upload completion percentage

File input validation

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Implement file input handling with proper error checking:

Get the file input element using getElementById
Extract the selected file from the input's files array
Validate that a file was actually selected before proceeding
Show user-friendly error message if no file is selected

Upload configuration

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Set up the core configuration parameters for the multipart upload:

Base URL: Construct the API endpoint using ASSETS_PREFIX environment variable
File Key: Use the original filename as the storage key
Chunk Size: Set to 5MB for optimal performance
Total Parts: Calculate the number of chunks needed based on file size

Initiate upload

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Begin the multipart upload by requesting an uploadId from the server:

Create the initiation URL with action=create parameter
Send POST request with file metadata (key and content type)

Store `uploadId`

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

The uploadId is a unique identifier that links all parts of the multipart upload together. Store it securely as it will be used for all subsequent API calls.

Prepare parts for upload

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Set up the data structures and URL templates needed for uploading individual parts:

Parts Data Array: Initialize array to store part metadata (PartNumber and ETag)
Upload Part URL: Create URL template with required parameters:
- action=upload-part
- uploadId
- key for file identification

Upload file parts

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Implement the core chunking and uploading logic:

File Chunking: Use file.slice() to create 5MB chunks
Part Numbering: Assign sequential part numbers (1-based indexing)
Upload: Upload each part sequentially
Progress Tracking: Update progress bar after each successful part upload

Store part metadata

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

For each successfully uploaded part, store the identifying metadata in the partsData array:

Part Number: Sequential identifier for the part
ETag: Server-generated hash for integrity verification

This metadata is required to complete the multipart upload successfully.

Complete multipart upload

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Finalize the upload by combining all parts into a single file:

Create completion URL with action=complete parameter
Send POST request with:
- uploadId: Links all parts together
- key: Final file name
- parts: Array of part metadata

Error handling and cleanup

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Handle errors and reset the state:

Try-Catch Block: Wrap entire upload process in error handling
User Feedback: Show success/error messages to the user
State Reset: Clean up upload state and progress in finally block

UI components

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Create a clean, responsive UI for the upload functionality:

File Input: Standard HTML file picker
Upload Button: Disabled during upload with visual feedback
Progress Bar: Real-time visual progress indicator
Status Text: Percentage completion display

The UI provides immediate feedback and prevents multiple simultaneous uploads.

Component setup

Start by setting up the React component with state variables for tracking upload progress and status:

isUploading: Boolean flag to track upload state and disable UI elements
progress: Number to track upload completion percentage

File input validation

Implement file input handling with proper error checking:

Get the file input element using getElementById
Extract the selected file from the input's files array
Validate that a file was actually selected before proceeding
Show user-friendly error message if no file is selected

Upload configuration

Set up the core configuration parameters for the multipart upload:

Base URL: Construct the API endpoint using ASSETS_PREFIX environment variable
File Key: Use the original filename as the storage key
Chunk Size: Set to 5MB for optimal performance
Total Parts: Calculate the number of chunks needed based on file size

Initiate upload

Begin the multipart upload by requesting an uploadId from the server:

Create the initiation URL with action=create parameter
Send POST request with file metadata (key and content type)

Store `uploadId`

The uploadId is a unique identifier that links all parts of the multipart upload together. Store it securely as it will be used for all subsequent API calls.

Prepare parts for upload

Set up the data structures and URL templates needed for uploading individual parts:

Parts Data Array: Initialize array to store part metadata (PartNumber and ETag)
Upload Part URL: Create URL template with required parameters:
- action=upload-part
- uploadId
- key for file identification

Upload file parts

Implement the core chunking and uploading logic:

File Chunking: Use file.slice() to create 5MB chunks
Part Numbering: Assign sequential part numbers (1-based indexing)
Upload: Upload each part sequentially
Progress Tracking: Update progress bar after each successful part upload

Store part metadata

For each successfully uploaded part, store the identifying metadata in the partsData array:

Part Number: Sequential identifier for the part
ETag: Server-generated hash for integrity verification

This metadata is required to complete the multipart upload successfully.

Complete multipart upload

Finalize the upload by combining all parts into a single file:

Create completion URL with action=complete parameter
Send POST request with:
- uploadId: Links all parts together
- key: Final file name
- parts: Array of part metadata

Error handling and cleanup

Handle errors and reset the state:

Try-Catch Block: Wrap entire upload process in error handling
User Feedback: Show success/error messages to the user
State Reset: Clean up upload state and progress in finally block

UI components

Create a clean, responsive UI for the upload functionality:

File Input: Standard HTML file picker
Upload Button: Disabled during upload with visual feedback
Progress Bar: Real-time visual progress indicator
Status Text: Percentage completion display

The UI provides immediate feedback and prevents multiple simultaneous uploads.

uploader.ts

import { useState } from "react";
export default function SimpleMultipartUploader() {
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
    //  Initiate file upload
  const uploadFile = async () => {
    const fileInput = document.getElementById("fileUpload") as HTMLInputElement;
    const file = fileInput?.files?.[0];
    if (!file) {
      alert("Please select a file first");
      return;
    }
    setIsUploading(true);
    setProgress(0);
    try {
      // Configuration
      const BASE_URL = `${import.meta.env.ASSETS_PREFIX}/api/multipart-upload`;
      const key = file.name;
      const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
      const totalParts = Math.ceil(file.size / CHUNK_SIZE);
      // Step 1: Initiate upload
      const createUploadUrl = new URL(BASE_URL);
      createUploadUrl.searchParams.append("action", "create");
      const createResponse = await fetch(createUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key, contentType: file.type }),
      });
      const createJson = await createResponse.json();
      const uploadId = createJson.uploadId;
      // Step 2: Upload parts
      const partsData = [];
      const uploadPartUrl = new URL(BASE_URL);
      uploadPartUrl.searchParams.append("action", "upload-part");
      uploadPartUrl.searchParams.append("uploadId", uploadId);
      uploadPartUrl.searchParams.append("key", key);
      for (let i = 0; i < totalParts; i++) {
        const start = CHUNK_SIZE * i;
        const end = Math.min(file.size, start + CHUNK_SIZE);
        const blob = file.slice(start, end);
        const partNumber = i + 1;
        uploadPartUrl.searchParams.set("partNumber", partNumber.toString());
        const uploadPartResponse = await fetch(uploadPartUrl, {
          method: "PUT",
          body: blob,
        });
        const uploadPartJson = await uploadPartResponse.json();
        const eTag = uploadPartJson.etag;
        partsData.push({ PartNumber: partNumber, ETag: eTag });
        // Update progress
        const currentProgress = ((i + 1) / totalParts) * 100;
        setProgress(currentProgress);
      }
      // Step 3: Complete upload
      const completeUploadUrl = new URL(BASE_URL);
      completeUploadUrl.searchParams.append("action", "complete");
      await fetch(completeUploadUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ uploadId, key, parts: partsData }),
      });
      alert("File uploaded successfully!");
    } catch (error) {
      console.error("Upload failed:", error);
      alert("Upload failed. Please try again.");
    } finally {
      setIsUploading(false);
      setProgress(0);
    }
  };
  return (
    <div style={{ padding: "20px", maxWidth: "500px" }}>
      <h2>Simple Multipart File Upload</h2>
      <div style={{ marginBottom: "20px" }}>
        <input
          type="file"
          id="fileUpload"
          style={{ marginBottom: "10px", display: "block" }}
        />
        <button
          onClick={uploadFile}
          disabled={isUploading}
          style={{
            padding: "10px 20px",
            backgroundColor: isUploading ? "#ccc" : "#007bff",
            color: "white",
            border: "none",
            borderRadius: "4px",
            cursor: isUploading ? "not-allowed" : "pointer",
          }}
        >
          {isUploading ? "Uploading..." : "Upload"}
        </button>
      </div>
      {isUploading && (
        <div style={{ marginTop: "20px" }}>
          <div
            style={{
              width: "100%",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              overflow: "hidden",
            }}
          >
            <div
              style={{
                width: `${progress}%`,
                height: "20px",
                backgroundColor: "#007bff",
                transition: "width 0.3s ease",
              }}
            />
          </div>
          <p style={{ marginTop: "5px", fontSize: "14px" }}>
            Progress: {Math.round(progress)}%
          </p>
        </div>
      )}
    </div>
  );
}

Component setup

File input validation

Upload configuration

Initiate upload

Store uploadId

Prepare parts for upload

Upload file parts

Store part metadata

Complete multipart upload

Error handling and cleanup

UI components

Component setup

File input validation

Upload configuration

Initiate upload

Store uploadId

Prepare parts for upload

Upload file parts

Store part metadata

Complete multipart upload

Error handling and cleanup

UI components

Store `uploadId`

Store `uploadId`