Upload
v1.0.7Updated 27 Aug 2026Upload component with four visual variants (default panel / compact / avatar / gallery), drag-drop, per-file progress, pause / resume / retry, and DnD reorder.
Preview
Live · 13 stories▸Why this is recommendedformuploadfiledropzone+4
The default, out-of-the-box Upload.
- ✓Resumable multi-file uploads
- ✓Image gallery uploads
- ✓Document attachment pickers
- Variants: default panel / compact / avatar / gallery
- Drag-drop zone with hover affordance
- Per-file progress bar
- Pause / resume / retry per upload
- DnD reorder of accepted files
- Rejection feedback (size / type / count)
- i18n: labels prop overrides every built-in string (status pills, rejection reasons, dropzone prompt/helper, aria-labels); percentages and byte sizes format through LocaleProvider (prettyBytes accepts an optional FormatLocale)
- ✕Single trivial file input (use Input type="file")
- ✕File browser (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
variantVisual layout
—onUploadUpload handler returning a progress observable
—acceptAllowed MIME types or extensions
—maxFilesMax total files
—maxSizeMax single-file size in bytes
—pausableAllow pause / resume per file
—reorderableAllow DnD reorder of files
—labelsOverride any built-in UI string — status pills, rejection reasons, dropzone prompt ({browse} token), action aria-labels (i18n). Merged over DEFAULT_UPLOAD_LABELS; {token} templates for parameterized strings. Percentages and byte sizes follow LocaleProvider.
—