FileDrop

A drop zone and file button that validates type, size and count.

Import
import { FileDrop } from '@texuli/primitives/file-drop';
Pattern
Button (WAI-ARIA APG)
Size budget
4.0 KiB gzip for @texuli/primitives/file-drop
Reference
packages/primitives/docs/prim-file-drop.md

Live demo

Loading the FileDrop demo…

Anatomy

FileDrop anatomy: each box holds the parts inside it.
  • FileDrop.Rootzone and hidden input

Behavior checks

tests/behavior/scenarios/file-drop.spec.ts runs 2 rows against the FileDrop scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 2 rows
  1. the drop group exposes a named native file input
  2. Enter opens the native file picker and selected files are announced

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/file-drop (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).