FeaturedNew
File UploadsBasic Dropzone
A dashed drop area with a real file input that stays reachable by keyboard and screen reader.
#upload#dropzone#drag-and-drop
3 frameworksBeginner
Loading…
A focusable target that accepts an image pasted from the clipboard, with a browse fallback.
<!--
Resting state - pasted-image previews are object URLs read from a paste event,
so they live in the React/TS tabs (which also revoke on replace and unmount).
The paste target is a real focusable control with a keyboard route to the
file input, so it is never a paste-only dead end.
-->
<div class="w-full max-w-md">
<div tabindex="0" role="button" aria-label="Paste a screenshot. Press Enter to browse for a file instead." class="flex flex-col items-center gap-2 rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="h-8 w-8 text-gray-400 dark:text-gray-500" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75M15.75 3.75v3a1.5 1.5 0 0 0 1.5 1.5h3M12 3.75h4.5L21 8.25v6.75" />
</svg>
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Paste a screenshot</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
Press Ctrl/⌘ + V here, or
<label for="paste-input" class="cursor-pointer font-semibold text-blue-700 underline underline-offset-2 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">browse</label>
</p>
<input id="paste-input" type="file" accept="image/*" class="sr-only" />
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Paste a screenshot' | Accessible label announced while loading. |
onFile | (file: File) => void | - | On file |
className | string | - | Additional classes merged onto the root element. |
The paste target is a real focusable control (`tabIndex={0}`) whose Enter/Space forwards to the file input, so pasting is an enhancement and never a dead end. The pasted image previews via an object URL that is revoked on replace and unmount.