File Element
Last Updated: September 2026File elements show a single uploaded file with size, status, progress, and remove/retry actions.
Source CodeAnatomy
link- 1File name
- 2Meta
- 3Actions
Variants
linkComplete
Finished upload with optional remove.
Uploading
Progress bar while the file transfers; optional cancel.
Error
Failed transfer with retry and remove.
Without size
fileSize is optional — omit when unknown.
Usage Guidelines
linkWhen to use
- •To show a single uploaded file with status, size, and actions.
- •During upload, complete, and error states in an upload flow.
- •Inside File List or a custom upload summary.
When not to use
- •As the drop target itself — use File Upload (UploadTrigger).
- •For non-file attachments — use a dedicated attachment row.
- •Without a way to remove or retry failed uploads when those actions matter.
Pass the action callbacks that match the status (cancel, retry, remove).
Don't leave uploading rows without onCancel when users may abort.
Use synthetic file names — never real patient identifiers in demos.
Don't put real names or MRNs in fileName examples.
Behaviors
linkStatus
- •status: uploading | complete (default) | error.
- •progress (0–100) only draws the bottom bar when status is uploading.
Actions
- •uploading → onCancel (stop_circle).
- •error → onRetry (refresh) and onRemove (delete).
- •complete → onRemove (delete).
Meta line
- •error shows “Upload Failed” instead of size.
- •complete appends “• Complete” after fileSize when size is present.
Content Guidelines
linkFile names
- •Prefer descriptive, de-identified names (visit-summary.pdf).
- •Long names truncate — keep critical tokens near the start.
Sizes
- •Format fileSize for humans (“0.5 mb”, “1.2 mb”) — the prop is a display string.
Accessibility
linkText & Labels
- •fileName is the primary visible identity of the row.
- •Action IconButtons ship with aria-labels (Cancel Upload, Retry Upload, Remove File).
ARIA attributes
- •Row is a presentational layout; actions are focusable buttons.
- •Error state uses danger-colored supportive text for “Upload Failed”.
Keyboard Support
- •Tab to action IconButtons when callbacks are provided.
- •Enter / Space activates cancel, retry, or remove.
WCAG Compliance Standards
FAQs
linkWhich props control the progress bar?
status="uploading" plus progress (0–100). The bar is clamped between 0 and 100.
When do action buttons appear?
Only when the matching callback is passed: onCancel (uploading), onRetry/onRemove (error), onRemove (complete).
FileElement vs FileList?
FileElement is one row. FileList maps FileItem[] onto FileElement with shared id-based handlers.