W3cubDocs

/Web APIs

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`getAsFileSystemHandle`	86	86	No	No	72	No	No	No	No	No	No	No