DataTransferItem: type property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.

The read-onlyDataTransferItem.type property returns the type (format) of theDataTransferItem object representing the drag data item.Thetype is a Unicode string generally given by a MIME type, although a MIME type is not required.

Some example types are:text/plain andtext/html.

Value

A string representing the drag data item's type.

Examples

This example shows the use of thetype property.

function dropHandler(ev) {  console.log("Drop");  ev.preventDefault();  for (const item of ev.dataTransfer.items) {    if (item.kind === "string" && item.type.match("^text/plain")) {      // This item is the target node      item.getAsString((s) => {        ev.target.appendChild(document.getElementById(s));      });    } else if (item.kind === "string" && item.type.match("^text/html")) {      // Drag data item is HTML      console.log("… Drop: HTML");    } else if (item.kind === "string" && item.type.match("^text/uri-list")) {      // Drag data item is URI      console.log("… Drop: URI");    } else if (item.kind === "file" && item.type.match("^image/")) {      // Drag data item is an image file      const f = item.getAsFile();      console.log("… Drop: File");    }  }}