(^294) ❘ CHAPTER 11 HTML5 DRAG AND DROP
retrieve data, and using an exception here automatically switches from the MIME type method to
the IE method.
NOTE For security reasons the dataTransfer object can be accessed only from
drag-and-drop event handlers while those drag-and-drop event handlers are
fi ring. This is done to protect users from unauthorized access to their system’s
clipboard. Access to the dataTransfer object may also be further limited by the
domain name origin (similar to the frame and AJAX cross-domain security
limitations).
Next, the drop element is passed through jQuery, $(this), and assigned to the variable named drop.
The variable dontAcceptTheDrop checks to see that an element isn’t being dropped on itself and that
the drop target is a directory, rather than a fi le. If dontAcceptTheDrop is true, the finderDirectory
Drop classname is removed, and execution of the event listener terminates with the call to return.
Finally, the
name finderDirectory or finderFile as a fi nal validation that the HTML snippet is HTML that you
want to work with.
In the next section, you learn how to further extend this example to accept drag-and-drop fi le
uploads, in addition to implementing drag and drop on the folder window. You extend the example
to dynamically reapply events to a dragged and dropped fi le or folder.
Implementing Drag-and-Drop File Uploads
File uploads by drag and drop have evolved during the past few years—beginning with only allowing
one or more fi les to be uploaded by drag and drop and then expanding to allowing drag-and-drop
downloads. File uploads then expanded again to allow both fi les and folders to be uploaded by drag
and drop. Presently, the latest versions of all the major browsers support fi le upload by drag and drop.
Chrome supports upload of both fi les and folders, and drag and drop downloads.In the following example, you build on Example 11-1, adding drag-and-drop upload support to it,
as well as some other tweaks that improve the drag-and-drop experience. Drag-and-drop uploading
is accompanied with thumbnail previews of image fi les, as well as an upload progress bar. To real-
istically test the following example, you need to add a server-side script into the mix to receive the
uploaded fi les. The server-side portion of this is not covered by this example, but I have provided a
remedial PHP script that you can use to examine uploaded fi le metadata. This example is available
in the book’s source code download materials as Example 11-2.<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
<meta charset='utf-8' />
<title>Finder</title>