File drag and drop
HTML Drag and Drop interfaces enable web applications to drag and drop files on a web page. This document describes how an application can accept one or more files that are dragged from the underlying platform'sfile manager and dropped on a web page.
The main steps to drag and drop are to define adrop zone (i.e., a target element for the file drop) and to define event handlers for thedrop anddragover events. These steps are described below, including example code snippets. The full source code is available inMDN's drag-and-drop repository (pull requests and/or issues are welcome).
Note thatHTML drag and drop defines two different APIs to support dragging and dropping files. One API is theDataTransfer interface and the second API is theDataTransferItem andDataTransferItemList interfaces. This example illustrates the use of both APIs (and does not use any Gecko specific interfaces).
Define the drop zone
Thetarget element of thedrop event needs anondrop event handler. The following code snippet shows how this is done with a<div> element:
<div> <p>Drag one or more files to this <i>drop zone</i>.</p></div>document.getElementById("drop_zone").addEventListener("drop", dropHandler);Typically, an application will include adragover event handler on the drop target element and that handler will turn off the browser's default drag behavior. To add this handler, you need to include adragover event handler:
document .getElementById("drop_zone") .addEventListener("dragover", dragOverHandler);Lastly, an application may want to style the drop target element to visually indicate the element is a drop zone. In this example, the drop target element uses the following styling:
#drop_zone { border: 5px solid blue; width: 200px; height: 100px;}Note:dragstart anddragend events are not fired when dragging a file into the browser from the OS. To detect when OS files are dragged into the browser, usedragenter anddragleave.This means that it is not possible to usesetDragImage() to apply a custom drag image/cursor overlay when dragging files from the OS — because the drag data store can only be modified in thedragstart event. This also applies tosetData().
Process the drop
Thedrop event is fired when the user drops the file(s). In the following drop handler, if the browser supportsDataTransferItemList interface, thegetAsFile() method is used to access each file; otherwise theDataTransfer interface'sfiles property is used to access each file.
This example shows how to write the name of each dragged file to the console. In areal application, an application may want to process a file using theFile API.
Note that in this example, any drag item that is not a file is ignored.
function dropHandler(ev) { console.log("File(s) dropped"); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) [...ev.dataTransfer.items].forEach((item, i) => { // If dropped items aren't files, reject them if (item.kind === "file") { const file = item.getAsFile(); console.log(`… file[${i}].name = ${file.name}`); } }); } else { // Use DataTransfer interface to access the file(s) [...ev.dataTransfer.files].forEach((file, i) => { console.log(`… file[${i}].name = ${file.name}`); }); }}Prevent the browser's default drag behavior
The followingdragover event handler callspreventDefault() to turn off the browser's default drag and drop handler.
function dragOverHandler(ev) { console.log("File(s) in drop zone"); // Prevent default behavior (Prevent file from being opened) ev.preventDefault();}