A file upload status orchestrator that composes a header with either a List or Grid layout. Each
file is rendered as an UploadFileStatus by default, showing progress, status, and
action buttons. Override per-file rendering with a custom itemContent snippet.
Basic File List
Pass an array of file objects. Each object needs fields for the file name, a unique value, status, progress, size, and MIME type. The component displays a header with file count and status summary.
Grid View
Switch to a tile layout with view="grid". The same file data renders as a grid of
cards instead of a vertical list.
Action Buttons
Control which action buttons appear based on the file's status. Pass arrays of status values to cancelWhen, retryWhen, and removeWhen. Each action fires
a callback with the raw file object.
Custom Item Content
Replace the default UploadFileStatus rendering with a custom itemContent snippet. The snippet receives a ProxyItem — use proxy.label, proxy.get('status'), etc. to access file data.
Combined Workflow
Use UploadTarget to accept files, then feed them into UploadProgress to track upload status. This example simulates uploading with a timer.
Props
- files — array of file data objects
- fields — field mapping (status, progress, size, type, error)
- view —
'list'or'grid' - cancelWhen — statuses that show cancel button
- retryWhen — statuses that show retry button
- removeWhen — statuses that show remove button
- labels — label overrides
- class — additional CSS classes
Events & Snippets
- oncancel — called with raw file object
- onretry — called with raw file object
- onremove — called with raw file object
- onclear — called when clear all is clicked
- itemContent — snippet
(proxy: ProxyItem)for custom file rendering