Drag and drop
Also called drag-and-drop upload or dropzone
An interaction where you pick up an item with the pointer, move it, and release it over a target, such as dropping a file onto an upload area.
import { useRef, useState } from 'react';
export function FileDropzone({
onFiles
}: {
onFiles: (files: File[]) => void;
}) {
const [over, setOver] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
return (
<div
data-over={over || undefined}
onDragOver={(event) => {
event.preventDefault(); // allows the drop
setOver(true);
}}
onDragLeave={(event) => {
// dragleave also fires when the pointer moves onto a child; ignore those.
if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
setOver(false);
}
}}
onDrop={(event) => {
event.preventDefault();
setOver(false);
onFiles(Array.from(event.dataTransfer.files));
}}
className='flex w-96 flex-col items-center gap-3 rounded-2xl border-2 border-dashed p-8 text-sm text-muted-foreground transition-colors data-over:border-solid data-over:border-blue-500 data-over:bg-blue-500/10'
>
<p>{over ? 'Drop to upload' : 'Drop files here'}</p>
{/* Dragging is hard for keyboard and some touch users, so offer a button. */}
<button
type='button'
onClick={() => inputRef.current?.click()}
className='rounded-lg border bg-background px-3 py-1.5 font-medium text-foreground hover:bg-muted'
>
Browse files
</button>
<input
ref={inputRef}
type='file'
multiple
hidden
onChange={(event) => onFiles(Array.from(event.target.files ?? []))}
/>
</div>
);
}Build a file dropzone: a box with a 2px dashed border, an upload icon, "Drop files here", and a Browse files button. While a file is dragged over it, switch to a solid blue border, a light blue background, and the text "Drop to upload". On drop, list each file with its name, size, and a progress bar, then a green check when done. Reject files over 10MB with an inline error, and keep the highlight from flickering when the pointer crosses child elements.
Paste into Layerwise or any AI coding tool.
What is Drag and drop?
Drag and drop has three parts: something to drag, a place to drop it, and feedback in between. While a file hovers over an upload area, the area should change (a solid colored border, a tint, a message like "Drop to upload") so people know letting go will work. After the drop, show progress and a clear success state.
Use it for file uploads, moving cards between columns on a board, reordering lists, and arranging items on a canvas. Always offer another way too, such as a Browse files button next to the dropzone and menu or keyboard actions for moving items, because dragging is hard for keyboard, screen reader, and some touch users.
For files from the computer, the browser’s drag events do the work: cancel the dragover event to allow a drop, then read event.dataTransfer.files in the drop handler. Watch out for dragleave, which also fires when the pointer moves onto a child element and makes the highlight flicker. For moving elements within a page, a library such as dnd-kit handles mouse, touch, and keyboard input.
Often confused with
- Drag gesture
- A drag gesture is the movement of pulling an element with a pointer or finger. Drag and drop is the whole pattern of picking something up and releasing it on a target that accepts it.
Related terms
All termsDrag gesture
Moving an element by pressing on it and sliding the pointer or finger, usually within set bounds and with a glide after release.
Drag to reorder
A list you can rearrange by dragging an item to a new spot while the other items slide aside to make room.
Progress bar
A horizontal bar that fills from left to right to show how much of a task is done, or slides in a loop while the total is still unknown.
Affordance
The visual cues that tell people what they can do with an element, like a raised button that looks pressable or a grip that says "drag me".
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.