File Uploader

File uploaders allow users to upload files to a server

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

Uploading Files

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

Preview Playground

import { FileUploader, type FileUploaderProps } from '@cerberus/react' export function MyFileUploader(props: FileUploaderProps) { return ( <FileUploader disabled={false} accept=".txt" heading=Upload your files name="add_uuid" /> ) }

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

Preview Playground

'use client' import { FileStatus, processStatus, type FileStatusProps, } from '@cerberus/react' import { useCallback, type MouseEvent } from 'react' export function MyFileStatus(props: FileStatusProps) { const handleClick = useCallback(( status: FileStatusActions, e: MouseEvent<HTMLButtonElement> ) => { switch (status) { case processStatus.TODO: console.log('TODO', e, 'call props.onClick') break case processStatus.PROCESSING: console.log('PROCESSING', e, 'call props.onClick') break case processStatus.DONE: console.log('DONE', e, 'call props.onClick') break case processStatus.ERROR: console.log('ERROR', e, 'call props.onClick') break default: throw new Error('Unknown status passed into handleClick') } }, []) return ( <FileStatus id={props.id} file={props.file} now={props.now} onClick={handleClick} status="todo" /> ) }

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:

NameDefaultDescription
headingThe heading for the file uploader
nameThe unique name of the file uploader
disabledfalseWhether the file uploader is disabled

The FileStatus component accepts the following props:

NameDefaultDescription
idA unique identifier for the ProgressBar.
fileThe name of the file being processed
nowThe current progress of the file upload
status'todo'The status of the file upload