File Uploader

A component to allow users to upload files and display their status.

import { FileUploader, FileStatus, processStatus } from '@cerberus/react'

Uploading Files

To allow users to upload files, use the FileUploader component.

Upload Files

Import .csv, .docx files

Click to select files

File Status

If you choose to process the file, you can use the FileStatus component to display the status of the job.

file.txt

Waiting to upload

file.txt

50% Complete

file.txt

File uploaded successfully

file.txt

There was an error uploading the file

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): ReactNode

FileStatus

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): ReactNode

Props

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

Edit this page on Github

API

export interface FileUploaderProps
  extends InputHTMLAttributes<HTMLInputElement> {
  heading?: string
  name: string
  disabled?: boolean
}

define function FileUploader(props: FileUploaderProps): ReactNode

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): ReactNode

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