File Dropzone v0.2.4 · @behivetech

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.

Usage

1import { FileDropzone } from "@behivetech/molecules.file-dropzone";
2
3<FileDropzone>Content</FileDropzone>;

Examples

Open all 2 →

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 />);

Properties

`FileDropzone` props

Prop	Type	Default	Description
`onFiles*`	`(files: File[]) => void`	—	Called with the chosen files, from either a drop or the click-to-browse fallback
`accept`	`string`	—	Native `accept` attribute passed to the underlying file input, e.g. "image/*,application/pdf"
`className`	`string`	—	Additional class names to merge with the component root element
`label`	`ReactNode`	`Drag and drop files here, or click to browse`	Prompt content; defaults to a generic drag-and-drop message
`multiple`	`boolean`	`true`	Whether more than one file can be selected at once; defaults to true

Usage

Examples

Properties

FileDropzone props

`FileDropzone` props