FileSystemDirectoryHandle
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Note: This feature is available inWeb Workers.
TheFileSystemDirectoryHandle interface of theFile System API provides a handle to a file system directory.
The interface can be accessed via thewindow.showDirectoryPicker(),StorageManager.getDirectory(),DataTransferItem.getAsFileSystemHandle(), andFileSystemDirectoryHandle.getDirectoryHandle() methods.
Instance properties
Inherits properties from its parent,FileSystemHandle.
Instance methods
Inherits methods from its parent,FileSystemHandle.
Regular methods:
FileSystemDirectoryHandle.getDirectoryHandle()Returns a
Promisefulfilled with aFileSystemDirectoryHandlefor a subdirectory with the specified name within the directory handle on which the method is called.FileSystemDirectoryHandle.getFileHandle()Returns a
Promisefulfilled with aFileSystemFileHandlefor a file with the specified name, within the directory the method is called.FileSystemDirectoryHandle.removeEntry()Attempts to asynchronously remove an entry if the directory handle contains a file or directory called the name specified.
FileSystemDirectoryHandle.resolve()Returns a
Promisefulfilled with anArrayof directory names from the parent handle to the specified child entry, with the name of the child entry as the last array item.
Asynchronous iterator methods:
FileSystemDirectoryHandle.entries()Returns a newasync iterator of a given object's own enumerable property
[key, value]pairs.FileSystemDirectoryHandle.keys()Returns a newasync iterator containing the keys for each item in
FileSystemDirectoryHandle.FileSystemDirectoryHandle.values()Returns a newasync iterator containing the values for each index in the
FileSystemDirectoryHandleobject.FileSystemDirectoryHandle[Symbol.asyncIterator]()Returns a newasync iterator of a given object's own enumerable property
[key, value]pairs.
Examples
Return directory handle
The following example returns a directory handle with the specified name; if the directory does not already exist it is created.
const dirName = "directoryToGetName";// assuming we have a directory handle: 'currentDirHandle'const subDir = await currentDirHandle.getDirectoryHandle(dirName, { create: true,});Return file path
The following asynchronous function usesresolve() to find the path to a chosen file, relative to a specified directory handle.
async function returnPathDirectories(directoryHandle) { // Get a file handle by showing a file picker: const handle = await self.showOpenFilePicker(); if (!handle) { // User cancelled, or otherwise failed to open a file. return; } // Check if handle exists inside our directory handle const relativePaths = await directoryHandle.resolve(handle); if (relativePath === null) { // Not inside directory handle } else { // relativePath is an array of names, giving the relative path for (const name of relativePaths) { // log each entry console.log(name); } }}Return handles for all files in a directory
The following example scans recursively through a directory to returnFileSystemFileHandle objects for each file in that directory:
async function* getFilesRecursively(entry) { if (entry.kind === "file") { const file = await entry.getFile(); if (file !== null) { file.relativePath = getRelativePath(entry); yield file; } } else if (entry.kind === "directory") { for await (const handle of entry.values()) { yield* getFilesRecursively(handle); } }}for await (const fileHandle of getFilesRecursively(directoryHandle)) { console.log(fileHandle);}Specifications
| Specification |
|---|
| File System # api-filesystemdirectoryhandle |