Animated File Upload
A minimal, physical drag-and-drop file uploader with smooth drop reaction, independent file upload tracking, progressive state morphing, and accessible retry flows.
Loading preview…
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/animated-file-upload
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | true | Allow multiple files selection and upload |
| accept | string | string[] | undefined | Accepted MIME types or file extensions (e.g. image/*, .pdf) |
| maxSize | number | 26214400 (25MB) | Maximum file size in bytes |
| maxFiles | number | 10 | Maximum number of concurrent files in list |
| dropTitle | string | 'Drop files here' | Primary drop target heading |
| dropSubtitle | string | 'or browse from your device' | Secondary call-to-action text |
| variant | 'standard' | 'compact' | 'standard' | Display density mode |
| disabled | boolean | false | Disables all interactions and file picking |
| onFilesSelected | (files: File[]) => void | undefined | Callback triggered when files are chosen |
| onUploadComplete | (file: UploadFileItem) => void | undefined | Callback fired on successful upload completion |
| uploadHandler | (file, onProgress) => Promise<void> | undefined | Custom async upload handler returning a promise |