Multipart Uploader

A multi-file queue uploader with bounded concurrency, live per-file progress and cancel — with a prefix, large files stream through your gateway into a multipart upload on S3-family storage.

A heavier-duty uploader for many or large files. Queue files, upload them with bounded concurrency, watch each one’s progress, and cancel everything in flight.

How a file travels depends on prefix. With a prefix, each file gets an explicit key and streams through your gateway into files.upload(key, stream); the S3-family adapters (S3, R2, MinIO and the other S3-compatible providers, on their AWS SDK client rather than client: "fetch") turn a large stream into a multipart upload automatically (through the optional @aws-sdk/lib-storage package, which they need for any stream body of unknown length), while other adapters write it however their provider does. Without a prefix, the server mints each key and the browser uploads the file in a single request to a presigned URL, or through the gateway when the adapter can’t sign — no multipart.

"use client";

import { demoFiles } from "@/lib/demo-files";
import { MultipartUploader } from "@/registry/files-sdk/multipart-uploader/multipart-uploader";

const Example = () => {
  const files = demoFiles;

  return <MultipartUploader files={files} prefix="demo/" />;
};

export default Example;

Installation

npx shadcn@latest add https://files-sdk.dev/r/multipart-uploader.json

Usage

import { useFiles } from "files-sdk/react";

import { MultipartUploader } from "@/components/files-sdk/multipart-uploader";

export function BulkUploader() {
  const files = useFiles({ endpoint: "/api/files" });

  return <MultipartUploader files={files} prefix="uploads/" concurrency={3} />;
}

Cancel calls files.abort(), aborting every in-flight request the hook started. Files that were mid-upload show as cancelled, files that hadn’t started stay queued, and the next Upload retries both; the hook re-arms automatically. Removing a queued file mid-run takes it out of the run too.

Props