Drag & Drop
A UI pattern that allows users to load files by dragging them from the desktop directly into a browser drop zone, bypassing file dialogs.
Drag and drop lets users transfer files directly from their desktop or file manager into a web application. Combining the HTML5 Drag and Drop API with the File API enables intuitive file input without opening a file selection dialog.
Implementation listens for dragover, dragleave, and drop events, retrieving File objects from event.dataTransfer.files. Visual feedback (drop zone highlighting) and file type validation (rejecting non-image files) provide clear user guidance.
Bulk processing tools support simultaneous multi-file drops, and some implementations accept entire folders. All tools on this site, including the image compression tool, support drag-and-drop file input.