FileUpload

A drag-and-drop file upload component with progress indicators and file type restrictions.

Import


import { FileUpload } from "@raydenui/ui";

Usage

Basic

Click to upload or drag and drop


const [files, setFiles] = useState<FileUploadFileData[]>([]);
 
<FileUpload
  files={files}
  onFilesChange={setFiles}
  onUpload={(file) => handleUpload(file)}
/>

With File Type Restrictions

Click to upload or drag and drop

PDF, DOC up to 10MB


<FileUpload
  files={files}
  onFilesChange={setFiles}
  accept=".pdf,.doc,.docx"
  description="PDF, DOC up to 10MB"
/>

Multiple Files

Click to upload or drag and drop

Upload up to 5 files


<FileUpload
  files={files}
  onFilesChange={setFiles}
  multiple
  maxFiles={5}
/>

Custom Styling

Click to upload or drag and drop

PNG, JPG up to 10MB


<FileUpload
  files={files}
  onFilesChange={setFiles}
  title="Upload Images"
  description="PNG, JPG up to 10MB"
/>

With Progress


const [progress, setProgress] = useState(0);
 
<FileUpload
  progress={progress}
  uploading={progress > 0 && progress < 100}
  onUpload={async (files) => {
    for (let i = 0; i <= 100; i += 10) {
      setProgress(i);
      await delay(100);
    }
  }}
/>

With Max File Size


<FileUpload
  maxSize={5 * 1024 * 1024} // 5MB
  onUpload={(files) => handleUpload(files)}
  onError={(error) => showError(error)}
/>

Props

Prop	Type	Default	Description
`onUpload`	`(files: File[]) => void`	—	Upload handler
`onError`	`(error: string) => void`	—	Error handler
`accept`	`string`	—	Accepted file types
`maxSize`	`number`	—	Max file size in bytes
`multiple`	`boolean`	`false`	Allow multiple files
`maxFiles`	`number`	—	Max number of files
`progress`	`number`	—	Upload progress (0-100)
`uploading`	`boolean`	`false`	Upload in progress state
`title`	`string`	`"Upload file"`	Title text
`description`	`string`	—	Description text
`icon`	`ReactNode`	—	Custom icon
`disabled`	`boolean`	`false`	Disables the upload
`className`	`string`	—	Additional CSS classes

Accessibility

Keyboard accessible file selection
Drag and drop with visual feedback
Progress announced to screen readers