# 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.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/transfer-queue
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/TransferQueue.tsx

## Usage

```tsx
"use client";

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);
        }
      }}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/transfer-queue
```

## Props

- `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` (default `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.