FileUpload
Markdown for agentsDrag-and-drop file picker with a removable file list and per-file progress bars.
npx slipstream-ui@latest add file-uploadAttachments (interactive)
Accepted: .pdf,.csv
PDF or CSV, up to 10 MB each
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| files | File[] | — | Controlled selection. |
| defaultFiles | File[] | — | Initial selection when uncontrolled. |
| onFilesChange | (files: File[]) => void | — | Fired on add, drop and remove. |
| label | string | — | Drop-zone copy. |
| hint | string | — | Helper line under the drop zone. |
| progress | Record<string, number> | — | Per-file progress 0–100 keyed by file name. |
| accept / multiple | string | boolean | — | Native input constraints pass through. |
Accessibility
- The visible label targets a real (sr-only) file input, so keyboard and mobile file dialogs work.
- Uploading files expose role=progressbar with a name.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.