# Upload Dropzone

> A drop area whose dashed border flows when a file is dragged over, with a progress bar per file that ends in a drawn tick or a clear error.

Category: Inputs · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/upload-dropzone

## When to use it

Avatars, attachments, imports and document uploads in apps and dashboards, anywhere people bring files in.

## How it works

The drop area counts dragenter and dragleave events, so hovering over its children never makes the highlight flicker. Its dashed border is an SVG rectangle measured to the area, and while a file hovers, its dash offset animates so the dashes flow round the edge. Each file gets a row immediately: oversized files are rejected on the spot, and the rest call your upload function, which reports progress from 0 to 1. Rows end in a tick drawn with pathLength, or the error message. A real button opens the native file picker, and every outcome is announced in a status region.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/upload-dropzone` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `upload` | `(file: File, progress: (fraction: number) => void) => Promise<void>` |  | Uploads one file and reports progress; throw to fail. |
| `accept` | `string` |  | Allowed file types, as for an input, e.g. "image/*,.pdf". |
| `maxSizeMb` | `number` | `10` | Largest file allowed, in megabytes. |
| `multiple` | `boolean` | `true` | Allow several files at once. |
| `label` | `string` | `"Upload files"` | Heading and accessible name. |
| `accent` | `string` | `"#5FAEB4"` | Colour of the highlight, progress and ticks. |

## Accessibility

- **Keyboard: Pass.** A real button opens the native file picker, so uploading never needs drag and drop (WCAG 2.5.7).
- **Screen readers: Pass.** Each finished, failed or rejected file is announced in a status region; the file list is labelled.
- **Reduced motion: Pass.** With reduced motion on, the border doesn't flow, the icon doesn't lift and progress changes without springing.
- **Colour contrast: Pass.** Text measures 15.5:1, hints 7.7:1, the link 7.5:1 and error messages 7.3:1.