FileDrop

Uploading a file: a statement, a photo, an import.

import { useState } from "react";
import { FileDrop } from "@hackcove/ui";

function Example() {
  const [name, setName] = useState("");
  return (
    <FileDrop accept=".csv" onChange={(event) => setName(event.target.files?.[0]?.name ?? "")}>
      {name === "" ? "Drop a bank statement here or click to choose" : name}
    </FileDrop>
  );
}

import { FileDrop } from "@hackcove/ui";

<FileDrop>Drop here</FileDrop>

• Say what the zone wants in its children, and restrict the type with accept.
• Show the chosen file's name in the children from onChange; the zone does not do it for you.
• size="sm" is a compact chip or tile.
• multiple, name and disabled go on the zone like any file input.
• Put a FileDrop in a Field when it needs a label of its own above it.

• A real <input type="file"> covers the whole zone, invisible, so a click opens the file dialog, a dragged file is taken as by any file input, and the browser's keyboard handling applies.
• The zone is a <label>, so its children are the input's accessible name.
• The zone shows the keyboard focus ring while the input has focus.