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/aBureau · ✓BêtaRetours

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

Vérifier un document

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

Web uniquement — React, depuis @krizaka/ui/drop-overlay. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. Used by Yomizaka.

Quand l’utiliser

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.

Quand ne pas l’utiliser

A field in a form that takes a file.À la place : File upload

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`label`requis	`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.

Accessibilité

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.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub