Dealing with Local Files Using the File API - HTML5 Programming for ASP.NET Developers - page 239

function OnDragLeave(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDrop(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
alert(files.length + " file(s) dropped!");
}
This code wires event handlers for four events— dragenter , dragover , dragleave , and drop —using the
addEventListener() method. Unlike in the Shopping Cart example, the functions OnDragEnter ,
OnDragLeave , and OnDragOver don't do anything special apart from calling the stopPropagation() and
preventDefault() methods. The jQuery stopPropagation() method stops the event from bubbling up the
DOM tree, thus preventing any parent handlers from being notified of the event. Similarly, the jQuery
preventDefault() method prevents the event's default action.
If you wish, you can set dropEffect or a visual indicator in these event handlers. Also, note that you
aren't setting the dataTransfer object anywhere. This is because data (files in this case) comes from an
external source. Notice the OnDrop () event-handler function: it uses the files property of the dataTransfer
object to access the files that were dropped on the element. It then displays the number of files dropped
using the length property.
To test the web form, run it: drag a few files from Windows Explorer and drop them on the basket. As
soon as you drop the files, you should see an alert with the number of files dropped.
Reading Files and Displaying File Information
Now that you know the techniques for selecting files—file field, custom button, and drag-and-drop—let's
see how to read the selected files using the File API. To understand the process, you develop a web form
that resembles Figure 9-10.