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
| Name | Type | Default | Description |
|---|---|---|---|
| name | string | Specifies the name of the component (form component only). | |
| disabled | bool | false | If true, the file upload is disabled. |
| required | bool | false | If true, the user must select a file. |
| autoFocus | bool | false | If true, autofocus is enabled. |
| multiline | bool | false | Specifies 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. |
| minRows | number | Indicates the minimum number of rows. | |
| maxRows | number | Indicates the maximum number of rows. | |
| startAdornment | component | Displays an icon or typography component at the start of the text field. | |
| endAdornment | component | Displays an icon or typography component at the end of the text field. | |
| acceptedFiles | string | Defines a comma-separated list of allowed file types. | |
| maxFileSize | number | Defines 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
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large | medium | Defines the size of the component. |
| viewBox | 0 0 25 25 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #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
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | Defines the text to display in the text field. | |
| variant | h1 h2 h3 h4 h5 h6 subtitle1 subtitle2 body1 body2 caption button overline inherit string | inherit | Defines the type of typography to display. |
| color | initial inherit primary secondary textPrimary textSecondary error string | inherit | Defines the color of the typography. |
| gutterBottom | bool | false | Enables a gutter at the bottom of the typography component. |