File Uploader
File uploaders allow users to upload files to a server
- Labels should be used to describe the file types that can be uploaded
- The file uploader should have a clear call to action
- Headings can be used to describe the file uploader
Example
Processing Uploads
Cerberus provides some visual feedback when you would like to show the status of a file upload.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
File Uploader
File Uploaders can be used for any type of file (i.e. text, images, video, etc.).
Placement
File Uploaders should be placed in a location that is easy to find and use.
- They can be placed in:
- Forms
- Modals
- Pages
- Sidebars
On this page
import { FileUploader, FileStatus, processStatus } from '@cerberus/react'Uploading Files
To allow users to upload files, use the FileUploader component.
File Status
If you choose to process the file, you can use the FileStatus component to display the status of the job.
Customizing
To customize the FileUploader or FileStatus, we recommend extending the fileUploader or the fileStatus slot recipe in your panda config.
API
FileUploader
export interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement> { heading?: string name: string disabled?: boolean}
define function FileUploader(props: FileUploaderProps): ReactNodeFileStatus
export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]export type FileStatusActions = 'cancel' | 'retry' | 'delete'
export interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> { id: string file: string now: number status: processStatus onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void}export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps
define function FileStatus(props: FileStatusProps): ReactNodeProps
The FileUploader component accepts the following props:
| Name | Default | Description |
|---|---|---|
| heading | The heading for the file uploader | |
| name | The unique name of the file uploader | |
| disabled | false | Whether the file uploader is disabled |
The FileStatus component accepts the following props:
| Name | Default | Description |
|---|---|---|
| id | A unique identifier for the ProgressBar. | |
| file | The name of the file being processed | |
| now | The current progress of the file upload | |
| status | 'todo' | The status of the file upload |
On this page
Use Cases
- Users should be able to:
- Navigate to and activate a file uploader with assistive technology
- Select files to upload
- Receive feedback on the status of the upload
Interaction & Style
Changes to color and thickness of stroke help provide clear visual cues for interaction.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) input |
| Enter | Opens the file dialog to select a file to upload |
| Space | Opens the file dialog to select a file to upload |
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
The accessibility label for a input is typically the same as the label for the input.
On this page