Dropzone Upload

Features

• Native <dialog> element with built-in Escape-to-close and focus trapping
• Backdrop scrim click-to-close with focus return to the trigger button
• Drag-and-drop dropzone with a drag-over highlight and a floating upload icon
• Multi-file selection via click or drop, with a live selected-file list
• Client-side validation: CSV / XLSX / XLS types only, 25MB total size limit
• Inline validation feedback rendered into an aria-live region
• Cancel (reset) and Import (submit) actions plus a Help Center link
• Responsive layout that stacks the action row on narrow screens and respects reduced motion

Accessibility

Dialog semantics

role="dialog", aria-modal="true", aria-labelledby on the title

Dropzone region

role="region" with aria-label, file list in an aria-live="polite" region

File input

aria-label and aria-describedby linking the dropzone message

Buttons

<button> with aria-label on trigger, close, Cancel, and Import

Focus management

Escape and backdrop close return focus to the trigger

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Dropzone Upload in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dialog is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.