FileUpload
v1.0.8Updated 27 Aug 2026Drag-drop dropzone with click-to-pick fallback, per-file progress, rejection feedback, and a virus-scan placeholder. Three layouts: default panel, single-line compact, and round avatar picker.
Preview
Live · 9 stories▸Why this is recommendedformuploadfiledropzone+2
The default, out-of-the-box FileUpload.
- ✓CV / document upload
- ✓Email attachment picker
- ✓CSV / data import
- ✓Avatar image picker (avatar variant)
- Drag-and-drop with hover affordance
- Per-file progress bar
- Rejection feedback (size / type / count) via inline Alerts
- Multi-file with maxFiles + maxSize guards
- Avatar variant with live image preview
- Server scan placeholder state
- i18n: labels prop overrides every built-in string (prompt, statuses, rejection reasons, aria-labels); file sizes and progress percentages format via LocaleProvider/useB69Locale
- ✕Inline single-file inputs (use Input type="file")
- ✕File browser / manager (use FileBrowser)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
onFilesCallback with accepted File[]
—acceptAllowed MIME types or extensions
—maxSizeMax single-file size in bytes
—maxFilesMax total files accepted
—variantVisual layout
—multipleAllow multi-select
—labelsOverride any built-in UI string — dropzone prompt, helper line, statuses, rejection reasons, aria-labels (i18n). Merged over DEFAULT_FILE_UPLOAD_LABELS; {token} templates for parameterized strings.
—