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.

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

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.

js
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"); } } }

Specifications

Specification
HTML
# dom-datatransferitem-kind-dev

Browser compatibility

See also