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

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.3/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. The installer merges shared theme rules into the stylesheet configured in components.json. 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.