In these lectures, we will learn how to drag and drop files between the browser and the desktop. The process shares similarities with the methods for dragging and dropping elements within an HTML document, but it's even simpler!
The principle is the same as in the examples from the previous section (drag and drop basics), except that we do not need to worry about a dragstart handler. Files will be dragged from the desktop, so the browser only has to copy their content from the clipboard and make it available in our JavaScript code.
Indeed, the main work will be done in the drop handler, where we will use the files property of the dataTransfer object (aka the clipboard). This is where the browser will copy the files that have been dragged from the desktop.
This files object is the same one we saw in the chapter about the File API in the "HTML5 part 1" course: it is a collection of file objects >(sort of file descriptors). From each file object, we will be able to extract the name of the file, its type, size, last modification date, read it, etc.
In this source code extract we have a drop handler that works on files which have been dragged and dropped from the desktop to a drop zone associated with this handler with an ondrop=dropHandler(event); attribute:
function dropHandler(event) {
// Do not propagate the event
event.stopPropagation();
// Prevent default behavior, in particular when we drop images or links
event.preventDefault();
// get the dropped files from the clipboard
var files = event.dataTransfer.files;
var filenames = "";
// do something with the files...here we iterate on them and log the filenames
for(var i = 0 ; i < files.length ; i++) {
filenames += '\n' + files[i].name;
}
console.log(files.length + ' file(s) have been dropped:\n' + filenames);
}
At lines 7-8, we get the files that have been dropped.
Lines 12-15 iterate over the collection and build a string which contains the list of file names.
Line 17 displays this string on the debugging console.
Complete working examples are to be presented later on...
If we drop an image into an HTML page, the browser will open a new tab and display the image. With a .mp3 file, it will open it in a new tab and a default player will start streaming it, etc. We need to prevent this behavior in order to customisethe processing of the dropped files (i.e. display an image thumbnail, add entries to a music playlist, etc.). So, when dragging and dropping images or links, we need to prevent the browser's default behavior.
At the beginning of the drop handler in the previous piece of code, you can see the lines of code (lines 2-5) that stop the propagation of the drop event and prevent the default behavior of the browser. Normally when we drop an image or an HTTP link onto a web page, the browser will display the image or the web page pointed by the link, in a new tab/window. This is not what we would like in an application using the drag and drop process. These two lines are necessary to prevent the default behavior of the browser:
// Do not propagate the event
event.stopPropagation();
// Prevent default behavior, in particular when we drop images or links
event.preventDefault();
... like in this example:
function dragOverHandler(event) {
// Do not propagate the event
event.stopPropagation();
// Prevent default behavior, in particular when we drop images or links
event.preventDefault();
...
}
function dropHandler(event) {
// Do not propagate the event
event.stopPropagation();
// Prevent default behavior, in particular when we drop images or links
event.preventDefault();
...
}
Web.dev article: "Using the HTML5 drag and drop API"
HTML Goodies article: "Drag Files Into the Browser From the Desktop with HTML5"