Dropzone
The dashed-border box you drag files onto to upload, which also lets you click it to browse.
See it
What it is
A dropzone is an element wired to the HTML drag and drop events (dragenter, dragover, dragleave, drop) that pulls files off the DataTransfer object when you let go. The dashed border, the cloud icon, and the highlight-on-hover are conventions, not requirements; react-dropzone and Uppy made that look the default.
Use one anywhere people bring their own files. Always keep a real hidden file input behind it and make the box clickable and keyboard-focusable, because dragging is impossible on touch and miserable with a screen reader. Drag is the shortcut, not the door.
Three traps. You must call preventDefault on both dragover and drop, or the browser happily navigates away and opens the dropped file itself. The dragleave event fires whenever the pointer crosses onto a child element, so naive highlight code flickers (keep an enter counter or check relatedTarget). And dropped folders do not appear in the plain files list at all: you need the webkitGetAsEntry API to walk them.
Ask AI for it
Build a file dropzone: a large rounded area with a 2px dashed border, an upload icon, the label 'Drag files here or click to browse', and a small hint line listing accepted types and max size. Put a visually hidden multiple file input behind it so clicking the box or pressing Enter or Space opens the picker. Handle dragenter, dragover, dragleave, and drop with preventDefault on each, and use an enter-counter so the highlight does not flicker when the pointer crosses child elements. While a file is over the box, switch the border to a solid accent color with a tinted background. Validate type and size on drop, then list each accepted file as a row with name, human-readable size, a progress bar, and a remove button, and list rejected files with the reason they failed.