File editing and management: rich formatting, file storage, drag and drop - HTML5 in Action - page 129

• Enabling users to import files into the application by dragging them in from their
computer
• Allowing users to export files from the application by dragging them to their com-
puter
3.4.1. Dragging files into an application for import
To allow users to drag files into the application, you need to create a target zone or drop
zone where the user can drag the files and expect them to be imported. If you've already
loaded the application in your browser, you'll probably have noticed a note at the bottom
of the Create File zone in the File Browser view. The note informs users to import files by
dropping them anywhere in this zone. Let's stay true to our word and provide this function-
ality.
To enable the Create File zone, you need to implement two event handlers for the zone: one
for the drop event and another for the dragover event. The drop event handler will
enable the application to import files that are dropped into the Create File zone, and the
dragover event handler will signal a pending copy operation to the app. The app will re-
spond to the signal by adding a copy decal to the file icon(s) being dragged into the Create
File zone.
Add the code in the following listing right after the line pre-
viewBtn.addEventListener('click', previewFile, false) .