File Dropzone

v0.2.5
Stable

A drag-and-drop target with a click-to-browse fallback that reports the chosen `File` objects through `onFiles` — no upload, preview or validation of its own.

pnpm add @behivetech/molecules.file-dropzone

This is the snapshot of v0.2.5, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.2.5 are shown as code; only the latest version runs live. Open the live examples →

Basic File Dropzone
1const BasicFileDropzone = () => {
2  const [names, setNames] = useState<string[]>([]);
3

4  return (
5    <>
6      <FileDropzone
7        onFiles={(files) => setNames(files.map((file) => file.name))}
8      />
9      {names.length > 0 && <p>Chosen: {names.join(", ")}</p>}
10    </>
11  );
12};
13

14render(<BasicFileDropzone />);
Images Only File Dropzone
1const ImagesOnlyFileDropzone = () => (
2  <FileDropzone
3    onFiles={(files) => console.log(files)}
4    accept="image/*"
5    label="Drop images here"
6  />
7);
8

9render(<ImagesOnlyFileDropzone />);