(^320) ❘ CHAPTER 11 HTML5 DRAG AND DROP
You also learned how to implement drag-and-drop fi le uploads using the drag-and-drop API, which
includes looking for the files property on the dataTransfer object. You learned how to preview
thumbnails of uploading image fi les using the FileReader object. You learned how to monitor upload
progress by attaching progress and load events to the upload property of the XMLHttpRequest object.
Finally, you learned how to customize an HTTP POST request and submit the fi le upload to the
server side using the XMLHttpRequest and FormData objects.
EXERCISES
- Describe how you enable drag-and-drop functionality on an element. Which methods are leg-
acy methods and what browsers do the legacy methods exist for? - List the events in the order that they fi re that are used to drag an element.
- List the events in the order that they fi re that are used to drop an element.
- When you implement drag-and-drop fi le uploads, what property do you look for, and using
which event, to detect that a drag-and-drop fi le upload has taken place? For extra credit,
what property would you use if you weren’t using jQuery? - When implementing a thumbnail preview of image fi les, what format is used to view
preview images? - When creating a drag-and-drop fi le upload, what events can monitor fi le upload progress?
What object do you attach these events to? - Which event properties calculate fi le upload progress percentages?
- Describe how you would create custom POST variables in the HTTP request that is generated
for a drag-and-drop fi le upload. - How do you know that a fi le upload was successful?