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 queue of files with simulated uploads, per-item status and a Retry action on failures.
<!--
Resting state - the queue rows, their statuses and the Retry button are driven
by a simulated transfer that the markup cannot run, so they live in the
React/TS tabs. The markup owns the add-files control: a peer sr-only input
with a label that keeps a real tab stop.
-->
<div class="w-full max-w-md">
<div class="flex items-center justify-between gap-3">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Upload queue</p>
<input id="queue-input" type="file" multiple class="peer sr-only" />
<label for="queue-input" class="inline-flex min-h-9 cursor-pointer items-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-semibold text-gray-700 hover:bg-gray-100 hover:text-gray-900 peer-focus-visible:ring-2 peer-focus-visible:ring-blue-600 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100 dark:peer-focus-visible:ring-blue-400 dark:peer-focus-visible:ring-offset-gray-950">
Add files
</label>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Upload queue' | Accessible label announced while loading. |
onFiles | (files: File[]) => void | - | On files |
className | string | - | Additional classes merged onto the root element. |
Transfers are simulated with a per-item countdown; failures are deterministic (an even-id file fails its first attempt) so the retry path is always demonstrable. Statuses are text-backed, not colour-only, and Retry re-runs the same simulation and succeeds.