File drop zone
File drop zone
FileDropZone
provides a target area for users to drag and drop files, such as documents or images, and automatically uploads them to the web application.
Examples
How to use
Accessibility
- To enable users to upload single or multiple files from a native file browser.
- To enable users to attach supporting files to a form.
- To display upload progress, file listing and management. This is a simple component that only provides an upload zone. Instead, use
Dialog
as a starting point to create a more comprehensive file interface.
- When composing the file drop zone, consider using
FileDropZoneIcon
to inform users about the current status. You can show an upload icon when the user has not yet uploaded an item, or a status icon that communicates the current upload status. - We recommend passing a header to the component to indicate the expected action, such as "drop files here."
- You can customize the
FileDropZoneTrigger
's text by passingchildren
into the component. - Communicate any requirements, such as maximum file size and type restrictions as validation text, before the user uploads their file. If the upload fails, clearly explain the reason why and how to resolve it.
- You can specify acceptable file types with
FileDropZoneTrigger
'saccept
prop. The prop doesn't validate the selected files' types. Instead, it provides the acceptable types to the browser, which can guide users toward selecting the correct file types. - Make sure that the acceptance criteria is backed up by appropriate validation. Use
FileDropZone
'sonDrop
prop to validate the file types. - Inform users when files successfully upload to reassure them that the action has completed.
- To inform users of the criteria, you can display custom validation text on the file drop zone. When uploaded files fail to meet the validation criteria, change the
state
prop to"error"
so the file drop zone displays the error state.
To import FileDropZone
and related components from the core Salt package, use:
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|