Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Dragging and dropping files CHAPTER 13 517

E. dragover

F. dragleave

G. drop

2. Which of the following events are associated with the item being dragged? (Choose all
   that apply.)
   A. dragstart
   B. drag
   C. dragend
   D. dragenter
   E. dragover
   F. dragleave
   G. drop


3. Using the DataTransfer object, what kind of data can you pass to the drop event?
   A. Any valid string, number, date/time, or Boolean value
   B. Any URL that is within the same domain as the webpage
   C. Any JSON object
   D. Any object that can be represented as a string or URL

Lesson 2: Dragging and dropping files

You can drag and drop files by using the File application programming interface (API), which

is also part of HTML5. The File API provides indirect access to files in a tightly controlled

manner.

After this lesson, you will be able to:

■■Describe HTML5 drag and drop operating system integration.

■■Implement file drag and drop using HTML5.

Estimated lesson time: 20 minutes

Using the FileList and File objects

When dropping a file, the DataTransfer object returns a FileList object, which is a collection of

File objects that were dropped. The File object has the following properties.

■■name roperty that gets the file name and extension without a pathP

■■type roperty that gets the MIME type of the fileP

■■size roperty that gets the file size in bytesP