DataTransferItem: getAsFile() 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.
If the item is a file, the DataTransferItem.getAsFile() method returns the drag data item's File object. If the item is not a file, this method returns null.
Syntax
js
getAsFile() Parameters
None.
Return value
Examples
This example shows the use of the getAsFile() method 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-getasfile-dev |
Browser compatibility
Loading…