File Upload

A versatile component for handling file uploads with drag and drop support.

Usage

Import the FileUpload component and its subcomponents from @bun-ui/react:

import { FileUpload, FileUploadDropZone, FileUploadTrigger, FileUploadList } from "@bun-ui/react"

The FileUpload component provides two ways to trigger file selection:

1. Using FileUploadDropZone for drag and drop functionality:

<FileUpload>
  <FileUploadDropZone>
    <p>Drag and drop files here, or click to select files</p>
  </FileUploadDropZone>
  <FileUploadList/>
</FileUpload>

2. Using FileUploadTrigger for a simple button trigger:

<FileUpload>
  <FileUploadTrigger>Select Files</FileUploadTrigger>
  <FileUploadList/>
</FileUpload>

Examples

Drag and Drop

A simple file upload with drag and drop support.

Multiple Files

Upload multiple files at once.

File Type Restriction

Restrict file types using the accept prop.

Maximum Files

Limit the number of files that can be uploaded.

Disabled State

Disable the file upload component.

Custom Trigger

Use prop asChild in FileUploadTrigger to create a custom trigger element.

Form Integration

Use the FileUpload component within a form without any controlled state.

Controlled Usage

Use the FileUpload component with external state management and upload progress.

Preview

You can preview the selected files before uploading them by using FileUploadPreviewList component