@digitalbastion/react-upload

React hooks and a web worker for concurrent, chunked uploads to Azure Blob Storage.

Install

npm install @digitalbastion/react-upload

React 18.3 and React 19 are supported.

Usage

Your server must create a short-lived blob SAS with create and write permissions. Pass the function that requests that SAS to useUploadManager.

This Vite example imports the package's worker entry as a module worker:

import { useUploadManager } from "@digitalbastion/react-upload";
import UploadWorker from "@digitalbastion/react-upload/worker?worker";

export function Uploads() {
  const [uploader, send] = useUploadManager({
    uploadWorker: UploadWorker,
    fetchUploadUrl: async (file) => {
      const response = await fetch("/api/upload-url", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: file.name, type: file.type }),
      });

      if (!response.ok) throw new Error("Could not create upload URL");
      return ((await response.json()) as { url: string }).url;
    },
  });

  return (
    <>
      <input
        type="file"
        multiple
        onChange={(event) => {
          if (event.target.files) {
            send({
              type: "file.add",
              params: { files: Array.from(event.target.files) },
            });
          }
        }}
      />
      <p>{String(uploader.status)}</p>
    </>
  );
}

Other bundlers must construct a web worker from the exported @digitalbastion/react-upload/worker entry and pass its constructor through uploadWorker.

Use useFile(file.actorRef) for a reactive file name, state, uploaded byte count, and total size. Manager events support adding, removing, and restarting files.

The uploader sends each file in 2 MB Azure block-blob parts and runs at most four file uploads concurrently.

Security

Generate SAS URLs on a trusted server. Never expose an Azure account key in browser code. Grant only the create/write permissions and expiration needed for one blob upload.

License

MIT