The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
A versatile component for handling file uploads with drag and drop support.
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:
FileUploadDropZone
for drag and drop functionality:<FileUpload>
<FileUploadDropZone>
<p>Drag and drop files here, or click to select files</p>
</FileUploadDropZone>
<FileUploadList/>
</FileUpload>
FileUploadTrigger
for a simple button trigger:<FileUpload>
<FileUploadTrigger>Select Files</FileUploadTrigger>
<FileUploadList/>
</FileUpload>
A simple file upload with drag and drop support.
Drag and drop files here, or click to select files
Upload multiple files at once.
Drag and drop multiple files here, or click to select files
Restrict file types using the accept
prop.
Drag and drop images here, or click to select images
Limit the number of files that can be uploaded.
Drag and drop images here
.jpg, .jpeg, .png up to 5 files
Disable the file upload component.
File upload is currently disabled
Use prop asChild
in FileUploadTrigger
to create a custom trigger element.
Use the FileUpload component within a form without any controlled state.
Use the FileUpload component with external state management and upload progress.
Drag and drop files here, or click to select files
You can preview the selected files before uploading them by using FileUploadPreviewList
component
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 |
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. |