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.

Learn more
See full compatibility

The getAsFile() method of the DataTransferItem interface returns the drag data item's File object if the item is a file. If the item is not a file, this method returns null.

During a drag operation, this method can only read data in the handlers for the dragstart and drop events, because those are the only times the drag data store is readable. Calling it from any other drag event returns null. See Reading the drag data store for details.

Syntax

getAsFile()

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