284 Chapter 12—Finishing Touches:Some Global Attributes
permits combinations, such as copyLink, copyMove, or linkMove, marking both
components as valid. Via the keyword all, you can also allow all effects.
Before we move on to the next section, here are a few closing thoughts on se-
curity issues with drag and drop: Data in the DataTransfer object is only made
available to the script again at the drop event. So, while dragging a document
from A to B, data is prevented from being intercepted by a malicious document
C. For the same reason, the drop event must be explicitly triggered by the user by
dropping the object, not automatically by the script. Even the script-controlled
moving of the window underneath the mouse position must not fire a dragStart
event; otherwise, sensitive data could be dragged into malicious third-party doc-
uments against the user’s will.
Drag and drop in the browser opens a wealth of new possibilities. If you are
looking for an impressive example of combining drag and drop with Canvas, lo-
calStorage, offline cache, and other techniques associated with HTML5, such as
XMLHttpRequest or the FileAPI, do not miss Paul Rouget’s blog, an HTML5 offline
image editor and uploader application, with its four-minute video. Even though
it is only meant to be a showcase for features in Firefox 3.6, it does show in an
impressive manner what is already possible now. Check it out at http://hacks.
mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application.
Now, we’ll look closer at one aspect of this demo, introducing you to drag and
drop in a document and extracting data from the dragged file via the FileAPI.12.5.1 Drag and Drop in Combination with the “FileAPI”..............
Figure 12.4 shows a screen shot of the application we will develop in this section
based on drag and drop and the FileAPI. It allows us to drag locally saved images
taken with a digital camera or a mobile device directly into the browser and then
make parts of their EXIF information visible. The necessary files are again avail-
able online at:z http://html5.komplett.cc/code/chap_global/extract_exif_en.html
z http://html5.komplett.cc/code/chap_global/extract_exif.js
z http://html5.komplett.cc/code/chap_global/extract_exif.css
z http://html5.komplett.cc/code/chap_global/lib/exif.js
z http://html5.komplett.cc/code/chap_global/images/senderstal.jpg