DataTransferItem: getAsFileSystemHandle() method

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The getAsFileSystemHandle() method of the DataTransferItem interface returns a FileSystemFileHandle if the dragged item is a file, or a FileSystemDirectoryHandle if the dragged item is a directory.

Syntax

getAsFileSystemHandle()

Parameters

None.

Return value

A Promise fulfilled with a FileSystemFileHandle or FileSystemDirectoryHandle.

Exceptions

None.

Examples

This example uses the getAsFileSystemHandle method to return file handles for dropped items. 

elem.addEventListener("dragover", (e) => {
  // Prevent navigation.
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // Prevent navigation.
  e.preventDefault();

  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // kind will be 'file' for file/directory entries.
    if (item.kind === "file") {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === "file") {
        // run code for if entry is a file
      } else if (entry.kind === "directory") {
        // run code for is entry is a directory
      }
    }
  }
});

Specifications

Specification
File System Access
# dom-datatransferitem-getasfilesystemhandle

Browser compatibility

BCD tables only load in the browser

See also