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.
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
js
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.
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 === "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");
}
}
}
Specifications
| Specification |
|---|
| HTML # dom-datatransferitem-getasstring-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
getAsString
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support