File upload — dir/ui

Select or drop files with validation, progress, cancellation, and retry.

# File upload

Select or drop files with validation, progress, cancellation, and retry.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/file-upload#v0.1.2
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. Theme CSS is imported by the UI modules. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

## FileUpload, type FileUploadProps, type FileItem, type UploadFile

```tsx
import { FileUpload, type FileUploadProps, type FileItem, type UploadFile } from '@/components/collections/files.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| upload | UploadFile | Required | Adapter owns storage and must honor cancellation. |
| onComplete | (file: FileItem) => void | — |  |
| accept | string | — | Comma-separated extensions or MIME patterns. |
| maxSize | number | 20971520 | Bytes per file; applications must also validate on the server. |
| multiple | boolean | true |  |
| concurrency | number | 2 |  |
| disabled | boolean | false |  |
| label | string | Attach files |  |

```ts
type FileItem = { id: string; name: string; size: number; type?: string; url?: string; status?: "queued" | "uploading" | "complete" | "error" | "canceled"; progress?: number; error?: string }
type UploadFile = (file: File, context: { signal: AbortSignal; onProgress: (percent: number) => void }) => Promise<FileItem>
```

The preview uses a local object URL and stores no files on a server. failUpload is a preview-only control. Supply a storage adapter for persistence.