File upload
File upload lets users select and upload files.
- To let users attach a file or image to something else
- To let users add images to their avatars
How to use it
Default
Users drag and drop files on to the target or click to select which files to upload.
Disabled
A disabled File upload prevents user interaction. It doesn’t appear in the tab order and can’t receive focus.
Files
A File can have an icon and be dismissed. Files work together with a
Progress loader to show upload status. Use in
combination with FileList to display a list of files.
Size
File upload can be default or compact.
Validation
Show success and error validation with the File component.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { FileUpload, Input, Field, FileList, File } from '@zendeskgarden/react-forms'
API
The FileUpload component follows this structure:
<Field><Field.Label /><Field.Hint /><FileUpload><Input /></FileUpload></Field><FileList><FileList.Item><File><File.Close /><Progress /></File></FileList.Item>{/* etc. */}</FileList>
Field
A Field provides accessibility attributes to its child FileUpload field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within a Field component.
Field.Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest the Label within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the label visually without hiding it from screen readers | |
isRegular | boolean | Applies regular (non-bold) font weight |
Field.Message
Extends HTMLAttributes<HTMLDivElement>
The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.
File
Extends HTMLAttributes<HTMLDivElement>
The File component displays an icon based on the provided type, or a generic one when type is not specified. In case of multiple File components, nest each within an Item component.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset box-shadow styling on focus | |
isCompact | boolean | Applies compact styling | |
type | 'document' | 'presentation' | 'image' | 'pdf' | 'zip' | 'spreadsheet' | 'generic' | Determines the icon to display | |
validation | 'success' | 'error' | Applies validation state styling |
File.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
File.Delete
Extends ButtonHTMLAttributes<HTMLButtonElement>
FileList
Extends HTMLAttributes<HTMLUListElement>
Use the FileList component when displaying a list of multiple files.
FileList.Item
Extends LiHTMLAttributes<HTMLLIElement>
Nest an Item within a FileList component.
FileUpload
Extends HTMLAttributes<HTMLDivElement>
The FileUpload component works together with a library like react-dropzone. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | Indicates that the element is not interactive | |
isCompact | boolean | Applies compact styling | |
isDragging | boolean | Applies drag styling |
Input
Extends InputHTMLAttributes<HTMLInputElement>
Nest the Input within the FileUpload component. See default example usage.
| Prop name | Type | Default | Description |
|---|---|---|---|
focusInset | boolean | Applies inset box-shadow styling on focus | |
isBare | boolean | Removes borders and padding | |
isCompact | boolean | Applies compact styling | |
validation | 'success' | 'warning' | 'error' | Applies validation state styling |