File uploader

Help users select and upload a file.

Props

accept
string
Accepted file types as a comma-separated list of MIME types or file extensions (e.g., "image/*,.pdf").
maxFileSize
string
Maximum file size with unit (e.g., "5MB", "100KB", "1GB"). Files exceeding this will be rejected.
Defaults to 5MB.
testId
string
Sets a data-testid attribute for automated testing.
variant
GoabFileUploadInputVariant
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").
id
string
Sets the id attribute on the file upload input element.
maxFileSize
string
Maximum file size with unit (e.g., "5MB", "100KB", "1GB"). Files exceeding this will be rejected.
Defaults to 5MB.
testId
string
Sets the data-testid attribute for automated testing.
variant
GoabFileUploadInputVariant
The input display variant. "dragdrop" shows a drag-and-drop area, "button" shows a simple button.
Defaults to dragdrop.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
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.
variant
"dragdrop" | "button"
The input display variant. "dragdrop" shows a drag-and-drop area, "button" shows a simple button.
Defaults to dragdrop.
version
"1" | "2"
Defaults to 1.

Events

onSelectFile
(detail: GoabFileUploadInputOnSelectFileDetail) => void
Callback fired when a valid file is selected or dropped.
onSelectFile
GoabFileUploadInputOnSelectFileDetail
Emits when a file is selected. Emits the selected file details.
_selectFile
CustomEvent

File Upload Card Props

error
string
Error message to display. When set, the card shows an error state with a cancel button.
filename
string
The name of the uploaded file to display.
progress
number
Upload progress percentage from 0-100. Use -1 to indicate upload is complete.
Defaults to -1.
size
number
The file size in bytes. Displayed in a human-readable format (KB, MB).
testId
string
Sets a data-testid attribute for automated testing.
type
string
The MIME type of the file. Used to determine the file type icon.
error
string
Error message to display. When set, the card shows an error state with a cancel button.
filename
string
The name of the uploaded file to display.
progress
number
Upload progress percentage from 0-100. Use -1 to indicate upload is complete.
size
number
The file size in bytes. Displayed in a human-readable format (KB, MB).
testId
string
Sets a data-testid attribute for automated testing.
type
string
The MIME type of the file. Used to determine the file type icon.
error
string
Error message to display. When set, the card shows an error state with a cancel button.
filename
string
The name of the uploaded file to display.
progress
number
Upload progress percentage from 0-100. Use -1 to indicate upload is complete.
Defaults to -1.
size
number
The file size in bytes. Displayed in a human-readable format (KB, MB).
testId
string
Sets a data-testid attribute for automated testing.
type
string
The MIME type of the file. Used to determine the file type icon.
version
"1" | "2"
Defaults to 1.

File Upload Card Events

onCancel
(detail: GoabFileUploadOnCancelDetail) => void
Callback fired when the user clicks the cancel button during file upload.
onDelete
(detail: GoabFileUploadOnDeleteDetail) => void
Callback fired when the user clicks the remove button on an uploaded file.
onCancel
GoabFileUploadOnCancelDetail
Emits when the user cancels a file upload. Emits a GoabFileUploadOnCancelDetail object with the filename.
onDelete
GoabFileUploadOnDeleteDetail
Emits when the user removes an uploaded file. Emits a GoabFileUploadOnDeleteDetail object with the filename.
Examples
Examples show common usage patterns and implementation guidance.

Other

Use file upload input with file upload card for complete file upload experiences.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs