web api instance method
DataTransferItem: getAsFileSystemHandle() method
Secure contextLimited availability
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 thedropevent handler, there must be noawaitbefore it. This is why we synchronously invokegetAsFileSystemHandle()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
}
}
});