INPUTS / COMPONENTS
File upload
Select files with clear boundaries.
About file upload
File Upload enables users to select files from their device and transfer them to a server. It includes functionalities like progress tracking and error handling to ensure a smooth upload experience.
Anatomy
Shared parts, named consistently.
Files stay in this browser. This example does not upload them.
- 1File Upload FieldLabelRequired
The label of the field.
- 2File Upload FieldAsterix
A star to show when required.
- 2File Upload FieldDropzone/inputRequired
A clickable dropzone and input.
- 4File Upload FieldHelper message
A string below the input to provide additional context about the File Drop. When in an error state, the helper message will turn red.
- 1File Upload ItemContainerRequired
The container of the item.
- 2File Upload ItemTitleRequired
The title of the file. This will popular automatically.
- 3File Upload ItemSubtitleRequired
The size of the file will be displayed automatically.
- 4File Upload ItemProgressRequired
While the file is being uploaded, the Progress component will show the upload progress. It will disappear when it reaches 100%.
- 5File Upload ItemIcon ButtonRequired
An Icon Button to remove the item.
- 6File Upload ItemError messageRequired
A message to be displayed when there is an error.
Try the default
A working example with the shared V1 visual language.
Files stay in this browser. This example does not upload them.
When to use
Offer file browsing alongside drag and drop. Validate size and type, show errors, and let people remove files before uploading.
The native file chooser and every remove button are keyboard accessible. Dragging is optional.