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

The FileSystemDirectoryHandle interface of the File System Access API provides a handle to a file system directory. The interface is accessed via the window.showDirectoryPicker() method.

FileSystemHandle FileSystemDirectoryHandle


Inherits properties from its parent, FileSystemHandle.


Inherits methods from its parent, FileSystemHandle.


Returns a new async iterator of a given object's own enumerable property [key, value] pairs


Returns a Promise fulfilled with a FileSystemFileHandle for a file with the specified name, within the directory the method is called.


Returns a Promise fulfilled with a FileSystemDirectoryHandle for a subdirectory with the specified name within the directory handle on which the method is called.


Returns a new async iterator containing the keys for each item in FileSystemDirectoryHandle.


Attempts to asynchronously remove an entry if the directory handle contains a file or directory called the name specified.


Returns a Promise fulfilled with an Array of directory names from the parent handle to the specified child entry, with the name of the child entry as the last array item.


Returns a new async iterator containing the values for each index in the FileSystemDirectoryHandle object.


Returns the entries function by default.


The following example returns a directory handle with the specified name, if the directory does not exist it is created.

const dirName = 'directoryToGetName';

// assuming we have a directory handle: 'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, {create: true});

The following asynchronous function uses resolve() 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.

  // Check if handle exists inside directory 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

The following example scans recursively through a directory to return FileSystemFileHandle 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)) {


File System Standard
# api-filesystemdirectoryhandle

Browser compatibility

BCD tables only load in the browser

See also