File Upload
Drag-and-drop dropzone with type/size validation, image thumbnails, per-file progress bars and remove buttons.
2 files · 182 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/file-upload.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs file-uploadUsage
import { FileUpload } from "@/components/opus/ui/file-upload";
<FileUpload accept="image/*,.pdf" maxSize={5_000_000} onFilesChange={upload} progress={progress} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| accept / multiple / maxSize / maxFiles | string / boolean / number | — | Constraints. |
| onFilesChange | (files: File[]) => void | — | Accepted files. |
| progress | Record<fileName, 0..100> | — | Drive the bars from your upload code. |