DataTransferItem: getAsString() method

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 DataTransferItem.getAsString() method invokes the given callback with the drag data item's string data as the argument if the item's kind is a Plain unicode string (i.e., kind is string).

Syntax

getAsString(callbackFn)

Parameters

callbackFn

A callback function that receives following arguments:

data: The DataTransferItem's string data.

Return value

None (undefined).

Examples

This example shows the use of the getAsString() method as an inline function in a drop event handler.

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