Dragging Files into the Page
Handle files dropped from the desktop.
Files from the Desktop
Beyond moving elements, the Drag and Drop API lets users drag files from their operating system into your page — the foundation of upload drop zones.
Accepting File Drops
The setup mirrors element drops: prevent default on dragover and drop. The difference is reading files instead of getData.
dropzone.addEventListener("dragover", (e) => e.preventDefault());All lessons in this course
- Making Elements Draggable
- Drop Targets and dataTransfer
- Visual Feedback During Drag
- Dragging Files into the Page