You can access the transferred items via dataTransfer.items, an array-like object. Iterate over it to get each DataTransferItem.

DataTransferItem has two read-only properties:

• kind — the kind of item (file or string)
• type — the MIME type of the item

and two methods:

• getAsFile() — returns a File object for the data (when kind is file)
• getAsString(callback) — calls the callback with the data as a string (when kind is string)

The two methods work differently. For file items, use getAsFile():

element.addEventListener('drop', event => {
  for (const item of event.dataTransfer.items) {
    const theFile = item.getAsFile()
  }
})

Learn more about the File object in the File APIs unit.

For string items, use getAsString() and pass a callback:

element.addEventListener('drop', event => {
  for (const item of event.dataTransfer.items) {
    item.getAsString(theString => {
      console.log(theString)
    })
  }
})

The MIME types of the dragged data are in the dataTransfer.types array. By default it may contain "text/plain". When dragging files, one of the types is "Files".

If files are being transferred, they are also available in dataTransfer.files, a FileList of the files being dragged.

Lessons in this unit:

0:	Introduction
1:	Drop targets
2:	Drag events
3:	Dragging data
4:	Set / get the effect
5:	▶︎ The data being transferred