Component
FileUpload
Accepts files via drag-and-drop or browsing, with validation and a removable list.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/file-uploadExamples
Live previews render through the docs app's PandaCSS codegen.
<FileUpload accept=".csv" hint="CSV up to 1 MB" maxSize={1048576} multiple />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `accept` | `string` | No | - | Native accept filter, e.g. \`"image/\*,.pdf"\`. Also validated on drop. |
| `multiple` | `boolean` | No | - | - |
| `maxSize` | `number` | No | - | Per-file size ceiling in bytes; larger files are rejected. |
| `disabled` | `boolean` | No | - | - |
| `onFilesChange` | `(files: File[]) => void` | No | - | Fires with the full selected list after every add/remove. |
| `onReject` | `(rejected: RejectedFile[]) => void` | No | - | Fires for drops/picks that fail the accept or maxSize checks. |
| `label` | `ReactNode` | No | - | Dropzone headline. |
| `hint` | `ReactNode` | No | - | Secondary hint line (formats, size limit). |
| `removeLabel` | `(name: string) => string` | No | - | Accessible label for a file's remove button; receives the file name. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/file-upload.json`
- Recipe: `fileUpload`
- Files: `src/components/ui/file-upload.tsx`