Skip to main content

File Upload

The File Upload component allows the user to browse and select one or more files to upload.

The File Upload component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
disabledboolfalseIf true, the file upload is disabled.
requiredboolfalseIf true, the user must select a file.
autoFocusboolfalseIf true, autofocus is enabled.
multilineboolfalseSpecifies whether the text field contains multiple lines. If enabled, the input field changes to a text area field and will stretch to match the size of its content unless the Min and Max rows are set.
minRowsnumberIndicates the minimum number of rows.
maxRowsnumberIndicates the maximum number of rows.
startAdornmentcomponentDisplays an icon or typography component at the start of the text field.
endAdornmentcomponentDisplays an icon or typography component at the end of the text field.
acceptedFilesstringDefines a comma-separated list of allowed file types.
maxFileSizenumberDefines the maximum size of a file.

Subcomponents

The File Upload component has two subcomponents that allow an icon or typography to be placed as an adornment at the start or end of the text field.

Icon

Specifies an icon to use at the start or end of a text field.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
mediumDefines the size of the component.
viewBox0 0 25 25
Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

Typography

Specifies typography to use at the start or end of the text field.

For further details, see the Typography component.

Properties

NameTypeDefaultDescription
textstringDefines the text to display in the text field.
varianth1
h2
h3
h4
h5
h6
subtitle1
subtitle2
body1
body2
caption
button
overline
inherit
string
inheritDefines the type of typography to display.
colorinitial
inherit
primary
secondary
textPrimary
textSecondary
error
string
inheritDefines the color of the typography.
gutterBottomboolfalseEnables a gutter at the bottom of the typography component.
on this page
Was this article useful?
89% of our users said this content was useful.