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

Bun UI

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:

Using FileUploadDropZone for drag and drop functionality:

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

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.

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

Prop	Type	Default	Description
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

Prop	Type	Default	Description
asChild	`boolean`	`false`	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.

Dropdown Menu Icon Button