index.md

title	slug	page-type	tags	browser-compat
FileSystemDirectoryHandle	Web/API/FileSystemDirectoryHandle	web-api-interface	Directories Directory File System Access API FileSystemDirectoryHandle Files Interface working with directories	api.FileSystemDirectoryHandle

{{securecontext_header}}{{APIRef("File System Access API")}}

The FileSystemDirectoryHandle interface of the {{domxref('File System Access API')}} provides a handle to a file system directory.

The interface can be accessed via the {{domxref('window.showDirectoryPicker()')}} and {{domxref('StorageManager.getDirectory()')}} methods.

{{InheritanceDiagram}}

Instance properties

Inherits properties from its parent, {{DOMxRef("FileSystemHandle")}}.

Instance methods

Inherits methods from its parent, {{DOMxRef("FileSystemHandle")}}.

• {{domxref('FileSystemDirectoryHandle.entries()')}}
  • : Returns a new async iterator of a given object's own enumerable property [key, value] pairs
• {{domxref('FileSystemDirectoryHandle.getFileHandle()')}}
  • : Returns a {{jsxref('Promise')}} fulfilled with a {{domxref('FileSystemFileHandle')}} for a file with the specified name, within the directory the method is called.
• {{domxref('FileSystemDirectoryHandle.getDirectoryHandle()')}}
  • : Returns a {{jsxref('Promise')}} fulfilled with a {{domxref('FileSystemDirectoryHandle')}} for a subdirectory with the specified name within the directory handle on which the method is called.
• {{domxref('FileSystemDirectoryHandle.keys()')}}
  • : Returns a new async iterator containing the keys for each item in FileSystemDirectoryHandle.
• {{domxref('FileSystemDirectoryHandle.removeEntry()')}}
  • : Attempts to asynchronously remove an entry if the directory handle contains a file or directory called the name specified.
• {{domxref('FileSystemDirectoryHandle.resolve()')}}
  • : Returns a {{jsxref('Promise')}} fulfilled with an {{jsxref('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.
• {{domxref('FileSystemDirectoryHandle.values()')}}
  • : Returns a new async iterator containing the values for each index in the FileSystemDirectoryHandle object.
• FileSystemDirectoryHandle[@@asyncIterator]()
  • : Returns the entries function by default.

Examples

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.
    return;
  }

  // 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
      console.log(name);
    }
  }
}

The following example scans recursively through a directory to return {{domxref('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)) {
  console.log(fileHandle);
}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• File System Access API
• The File System Access API: simplifying access to local files