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.
Tip
Validate as much as possible before the upload starts. File type, size, and other client-side checks should happen first so the file doesn't begin uploading until it's known to be valid. Once an upload is in progress, the only error a user should see on the file upload card is something like a network or server problem.
Content
Do
Use additional helper text to provide instructions about accepted file types.
Do
Show maximum file size in the file drop zone.
