Forms

Dropzone

A keyboard-operable drag-and-drop file area that validates type, size, and count.

BetaUsed in Aback ToolsRegistry JSON

Drop invoices hereor click to browsePNG, JPG, or PDF. Up to three files, 5 MB each.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add dropzone

Writes components/ui/dropzone.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Dropzone, fileMatchesAccept, formatFileSize } from "@/components/ui/dropzone";

Props and composition points for Dropzone. Native element props pass through.

Prop	Type	Default	Description
`onFilesAccepted`	`(files: File[]) => void`	None	Called with files that passed the type, size, and count checks. Required.
`onFilesRejected`	`(rejections: { file, reason }[]) => void`	None	Called with each refused file and a reason of "type", "size", or "count", so the page can explain it.
`accept`	`string`	None	Native accept syntax: ".pdf", "image/png", "image/*". It filters the picker and is also enforced for dropped files.
`multiple / maxFiles`	`boolean / number`	false / 1 or unlimited	Allow several files, and cap how many one selection may add.
`maxSize`	`number`	None	Largest accepted file in bytes.
`label / description / hint`	`ReactNode`	"Drop a file here" / "or click to browse"	The label is the input's accessible name; the description and hint are its description.
`icon / disabled / inputProps`	`ReactNode / boolean / input props`	None	Replace the upload glyph, disable the area, or pass name, id, or extra aria attributes to the file input.
`fileMatchesAccept / formatFileSize`	`helpers`	None	The exported accept check and a 1024-based size formatter for file rows.

Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

A real file input sits under the area, visually hidden but focusable. Tab reaches it, Enter or Space opens the picker, and the frame shows the focus ring.
The visible label names the input and the hint describes it, so the accepted formats are announced before choosing.
Dropping is a convenience, not the only path: the picker always works.
Announce results yourself. The example writes accepted and rejected outcomes to a role=status line instead of relying on colour.

Key	Action
`Tab`	Focus the file input.
`Enter`or`Space`	Open the system file picker.

The Aback products whose interfaces shaped this component.