The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!

v0.2.49Beta

Search

File Upload

Source

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>
  1. 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.

Drag and drop files here, or click to select files

Multiple Files

Upload multiple files at once.

Drag and drop multiple files here, or click to select files

File Type Restriction

Restrict file types using the accept prop.

Drag and drop images here, or click to select images

Maximum Files

Limit the number of files that can be uploaded.

Drag and drop images here

.jpg, .jpeg, .png up to 5 files

Disabled State

Disable the file upload component.

File upload is currently disabled

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.

Drag and drop files here, or click to select files

Controlled Usage

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

Drag and drop files here, or click to select files

Preview

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

Props

FileUpload

PropTypeDefaultDescription
accept
string-

Comma-separated list of allowed file types @example"image/*,.pdf")

disabled
boolean-

Whether the file upload is disabled

inputId
string-

Optional ID for the file input element

inputRef
RefObject-

Ref passed to the file input element

maxFiles
number-

Maximum number of files allowed to be uploaded. This prop is ignored if multiple is false.

multiple
boolean-

Whether multiple files can be selected

name
string-

Name attribute for the file input element

onFileRemove
(file: File) => void-

Callback function when a file is removed

onFileSelect
(files: File[]) => void-

Callback function when files are selected

value
File[]-

Controlled value of the selected files

FileUploadTrigger

PropTypeDefaultDescription
asChild
booleanfalse

Whether to render the button as a child component.

color
"primary" | "secondary" | "destructive" | "accent" | "neutral" | "success""primary"

The color scheme of the button.

size
"sm" | "md" | "lg""md"

Size of the file upload trigger button

variant
"text" | "outlined" | "contained""contained"

The visual style variant of the button.