File uploader
Help users select and upload a file.
Props
variant
dragdrop | button
The input display variant. "dragdrop" shows a drag-and-drop area, "button" shows a simple button.
Defaults to
dragdrop.
accept
string
Accepted file types as a comma-separated list of MIME types or file extensions (e.g., "image/*,.pdf").
Defaults to
*.
maxfilesize
string
Maximum file size with unit (e.g., "5MB", "100KB", "1GB"). Defaults to 5MB. Files exceeding this will be rejected.
Defaults to
5MB.
testId
string
Sets a data-testid attribute for automated testing.
version
1 | 2
Defaults to
1.
Events
onSelectFile
(event: Event) => void
_selectFile
CustomEvent
File Upload Card Props
filename
string
The name of the uploaded file to display.
size
number
The file size in bytes. Displayed in a human-readable format (KB, MB).
type
string
The MIME type of the file. Used to determine the file type icon.
progress
number
Upload progress percentage from 0-100. Use -1 to indicate upload is complete.
Defaults to
-1.
error
string
Error message to display. When set, the card shows an error state with a cancel button.
testId
string
Sets a data-testid attribute for automated testing.
version
1 | 2
Defaults to
1.
Other
Do
Use file upload input with file upload card for complete file upload experiences.