SIG—13 Signature system

TransferQueue

Uploads you can watch and steer: a concurrency-limited queue around your own transfer function, with live speed, time left, pause, retry and cancel.

Live — this one is real

SteadyDrops the large video

Simulated network: files you drop never leave your browser. Pause restarts a transfer unless your function resumes from an offset.

Handle

0 of 0 done

Idle0 B of 0 B

All file types · up to 200 MB each

Usage

tsx

import { TransferQueue } from "mizu-ui";

export function Example() {
  return (
    <TransferQueue
      label="Local reads"
      transfer={async (file, { signal, onProgress }) => {
        const reader = file.stream().getReader();
        let loaded = 0;
        for (;;) {
          const { done, value } = await reader.read();
          if (done) return;
          if (signal.aborted) {
            await reader.cancel();
            throw new DOMException("Stopped", "AbortError");
          }
          loaded += value.byteLength;
          onProgress(loaded);
        }
      }}
    />
  );
}

This code, running — no configuration beyond the data

0 of 0 done

Idle0 B of 0 B

All file types · up to 10 MB each

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

npx shadcn@latest add 0xuser64bit/mizu/transfer-queue

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/TransferQueue.tsx

Source is included in the npm package under src/signature/TransferQueue.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
label	string	—	Region name; also names the drop zone.
transfer	(file, { signal, onProgress }) => Promise	—	Your upload or per-file task. Honour the signal for pause and cancel; report loaded bytes. For upload progress use XMLHttpRequest's upload.onprogress — fetch cannot report it.
concurrency	number	2	Transfers running at once.
accept / maxSize	string / number	—	Validation applied by the drop zone before anything is queued.
onComplete / onItemsChange	function	—	One finished file; the whole queue after any change.
ref	TransferQueueHandle	—	add(files) — queue files from paste handlers or other sources.

Accessibility

Files arrive through the existing FileDropzone (a real button and file input, with validation errors as alerts). Each transfer is a progressbar whose value text reads its percentage, speed and time left; failures are alerts; every action names its file. Queueing, finishing, failing and cancelling are announced.

Motion

Rows slide in as files are queued and close when cleared. Progress moves continuously, batched to one update per frame; the colour changes with state and a check diamond pops on completion. The overall bar and throughput trace keep pace. Reduced motion removes the travel.

Works alongside

Chronicle TrendChart Waveform Plane