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
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { FileUpload, Input, Field, Hint, Label, FileList, File } from '@zendeskgarden/react-forms'
API
The FileUpload component follows this structure:
<Field><Label /><Hint /><FileUpload><Input /></FileUpload></Field><FileList><FileList.Item><File><File.Close /><Progress /></File></FileList.Item>{/* etc. */}</FileList>
Field
Extends HTMLAttributes<HTMLDivElement>
A Field provides accessibility attributes to its child FileUpload field by associating it with the corresponding Label and Hint.
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 |
Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within a Field component.
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 |
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 |