File Uploader
Drag-and-drop upload zone with a managed file list.
Drop a file or click to browse; removing entries works from the list.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/file-uploader.jsonUsage
The component manages the selection list; you receive the current File[] on
every change and own the actual upload.
import { FileUploader } from "@/components/ui/file-uploader";
<FileUploader
accept="image/*,.pdf"
multiple
hint="PNG, JPG or PDF, up to 10MB"
onFilesChange={(files) => setPending(files)}
/>Props
| Prop | Type | Default |
|---|---|---|
onFilesChange | (files: File[]) => void | — |
accept | string | — |
multiple | boolean | true |
disabled | boolean | false |
hint | string | — |
Accessibility
- The drop zone is a real button, so keyboard users open the native file picker with Enter/Space.
- Each file row's remove button is labeled with the file name.