精选最新
文件上传Basic Dropzone
A dashed drop area with a real file input that stays reachable by keyboard and screen reader.
#upload#dropzone#drag-and-drop
3 个框架初级
Loading…
An image dropzone that renders picked files as a responsive thumbnail grid with per-tile remove.
<!--
Resting state. Thumbnails are object URLs built from picked files at runtime,
so the grid lives in the React/TS tabs - and so does the revokeObjectURL that
keeps those URLs from leaking. The markup owns the sr-only input and label.
-->
<div class="w-full max-w-xl">
<div class="rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-center focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:focus-within:ring-blue-400 dark:focus-within:ring-offset-gray-950">
<input id="grid-input" type="file" accept="image/*" multiple class="sr-only" />
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Add images</p>
<label for="grid-input" class="mt-1 inline-block cursor-pointer text-sm font-semibold text-blue-700 underline underline-offset-2 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
or browse - images only
</label>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | 'Add images' | 加载时朗读的无障碍标签。 |
onFiles | (files: File[]) => void | - | On files |
className | string | - | 合并到根元素上的额外类名。 |
Thumbnails are object URLs, which are a resource, not a string: each pins its file's bytes until revoked, so the component revokes on remove and on unmount via a mirror ref. The grid runs two columns on phones up to four on desktop, so tiles reflow instead of shrinking.