DataTransferItem: getAsFileSystemHandle() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 Promise that fulfills with a FileSystemFileHandle if the dragged item is a file, or fulfills with a FileSystemDirectoryHandle if the dragged item is a directory.

Syntax

getAsFileSystemHandle()

Parameters

None.

Return value

A Promise.

If the item's kind property is "file", and this item is accessed in the dragstart or drop event handlers, then the returned promise is fulfilled with a FileSystemFileHandle if the dragged item is a file or a FileSystemDirectoryHandle if the dragged item is a directory.

Otherwise, the promise fulfills with null.

Exceptions

None.

Examples

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

Note: Because getAsFileSystemHandle() can only retrieve the entry handle in the same tick as the drop event handler, there must be no await before it. This is why we synchronously invoke getAsFileSystemHandle() for all items first, and then wait for their results concurrently.

elem.addEventListener("dragover", (e) => {
  // Prevent navigation.
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // Prevent navigation.
  e.preventDefault();
  const handlesPromises = [...e.dataTransfer.items]
    // kind will be 'file' for file/directory entries.
    .filter((x) => x.kind === "file")
    .map((x) => x.getAsFileSystemHandle());
  const handles = await Promise.all(handlesPromises);

  // Process all of the items.
  for (const handle of handles) {
    if (handle.kind === "file") {
      // run code for if handle is a file
    } else if (handle.kind === "directory") {
      // run code for is handle is a directory
    }
  }
});

Specifications

Specification
File System Access # dom-datatransferitem-getasfilesystemhandle