Dropzone

Use Dropzone

Dropzone is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Dropzone } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Dropzone label="Project attachments" name="attachments" multiple accept=".pdf,image/*" />
    </FloodRoot>
  );
}

Design notes

• The existing FileInput remains the real chooser and successful native form control. Dropping files dispatches the same selection flow: multiple appends and deduplicates; single selection keeps the first dropped file. Native form reset and per-file removal remain intact.
• The zone responds only to file drags and prevents navigation on file drop. Disabled fields reject drops. Translate label/description and FileInput action labels. The chooser remains keyboard accessible; dropping is an additional pointer workflow.
• accept guides the native chooser; the host must validate dropped file types, size and contents. Directories, remote transfer, progress, server upload and image processing are outside this control. No file contents are read. Available in 0.2.5.

API reference