DataTransferItem: kind 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.

Learn more
See full compatibility

The kind read-only property of the DataTransferItem interface returns the kind–a string or a file–of the object representing the drag data item.

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 kind 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 kind. It must be one of the following values:

'file': If the drag data item is a file.
'string': If the kind of drag data item is a plain Unicode string.

Examples

This example shows the use of the kind 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 === "file" && item.type.match("^image/")) {
      // Drag data item is an image file
      const f = item.getAsFile();
      console.log("… Drop: File");
    }
  }
}