Introduction: no need for a dragstart handler!
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!
Drag and drop files from the desktop to the browser: the files property of the clipboard
The principle is the same as in the examples from the previous section (drag’n’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 will be presented later on…
prevent the browser’s default behavior
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 customise the 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 utilising 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();
Best practice: add these lines to the drop handler AND to the dragOver handler attached to the drop zone!
… 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();
- …
- }
HTML game 