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.

See full compatibility
Learn more

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

The type is a protocol that is expected to be understood by both the origin of the drag and the target of the drag, which may be the operating system, external applications, other webpages, or a webpage under your control. Some commonly used types and their semantics are introduced in Working with the drag data store. When dragging files from the operating system, the MIME type is usually determined based on the extension without inspecting the file's contents. All browsers return an empty string when the MIME type cannot be determined, although the specification requires application/octet-stream.

During a drag operation, this property can be read in any drag event handler, even when the drag data store is in protected mode. The item's type remains accessible, but its data can only be read in the handlers for the dragstart and drop events. See Reading the drag data store for details.

Value

A string representing the drag data item's type.

Examples

This example shows the use of the type property.

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