File Dropzone

Drag-and-drop (and click-to-browse) upload target that reports files via onFiles.

A drag-and-drop (and click-to-browse) upload target. It wraps a hidden <input type="file">, adds a drag-over affordance, and hands the chosen files back through onFiles — the host decides what to do with them (upload, attach, preview). Presentation and interaction only; no network. Pass children to fully replace the inner content.

Import

tsx

1import { FileDropzone } from "@yuhuanowo/yunui";

Usage

onFiles receives a File[]. Style the label with icon, label, and hint:

tsx

1<FileDropzone
2  accept="image/*"
3  multiple
4  icon={<UploadCloud />}
5  label="Drop images here, or click to browse"
6  hint="PNG, JPG · up to 10MB"
7  onFiles={(files) => upload(files)}
8/>

Example

Dropzone

Drop images here, or click to browse

PNG, JPG · up to 10MB

Props

Prop	Type	Default	Description
accept	string	—	`accept` attribute forwarded to the input (e.g. "image/*,.wav").
children	ReactNode	—	Replace the entire inner content.
className	string	—
disabled	boolean	false	Disable interaction and dim the zone.
hint	ReactNode	—	Secondary hint under the label (e.g. "PNG, JPG up to 10MB").
icon	ReactNode	—	Leading icon shown above the label (ignored when `children` is set).
label	ReactNode	Drop a file here, or click to browse	Primary call-to-action text (ignored when `children` is set).
multiple	boolean	false	Allow selecting more than one file.
onFiles*	(files: File[]) => void	—	Called with the selected/dropped files (already filtered to a File[]).

File Dropzone

Import

Usage

Example

Props

On this page