Drop overlay

The whole window is the drop target: while files are dragged over the page, a full-window overlay says where to drop and hands the files over. No dashed box inside the page.

Web · ✓Mobile · n/aDesktop · ✓BetaFeedback

import { DropOverlay, splitDropped, dragHasFiles } from "@krizaka/ui/drop-overlay";

Vérifier un document

Glissez un fichier n'importe où sur la fenêtre.

Web only — React, from @krizaka/ui/drop-overlay. Beta: its API may still change in a minor version.

Mobile · n/a. A phone has no drag and drop from outside the app: the app offers the picker and the camera. → File upload

Why it is here. Used by Yomizaka.

When to use

An app whose main job is receiving documents (Yomizaka, Orazaka's workspace): drag a file anywhere.
Beside a primary action that opens the picker: the overlay is the shortcut, never the only way.

When not to use

A field in a form that takes a file.Use instead: File upload

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { DropOverlay, splitDropped, dragHasFiles } from "@krizaka/ui/drop-overlay";

Examples

Drop anywhere

Drag a file over the window; the primary action opens the picker.

Vérifier un document

Glissez un fichier n'importe où sur la fenêtre.

Props

Drag a file anywhere on the page: a full-window overlay accepts it.

Prop	Type	Default	Description
`label`required	`string`	—	What the overlay says (“Drop to check”) — passed translated.
`accept`	`readonly string[]`	—	What is accepted: MIME types, families (`image/*`) or extensions (`.pdf`).
`active`	`boolean`	—	Controlled form (a desktop app's native drops, which arrive as paths): shown while true, the DOM listeners are off. Leave undefined to handle DOM drops.
`disabled`	`boolean`	—	Turns the window back into a plain page (while a modal is open, signed out).
`hint`	`string`	—	One line under it (“PDF or text”).
`onFiles`	`((accepted: File[], rejected: File[]) => void) \| ((accepted: File[], rejected: File[]) => void)`	—	Not called in the controlled form. The files dropped: the accepted ones, then the ones `accept` refused.

Accessibility

Dragging is an extra: every action has a button and a picker.
The overlay is a polite status (role="status") saying what to do; it is decorative for the pointer.

Best practices

Keep a real file input behind the primary action: the keyboard and phones use it.
Pass accept and say what is accepted in hint; show the rejected files in the queue, not silently.
Disable it while a modal is open (disabled).
The overlay never takes the pointer: the window keeps receiving the drop. Reduced motion: it appears at once.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub