FileSystemDirectoryHandle

Draft: This page is not complete.

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.

Properties

Inherits properties from its parent, FileSystemHandle.

Methods

Inherits methods from its parent, FileSystemHandle.

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

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);
    }
  }
}

Specifications

Specification
File System Access # api-filesystemdirectoryhandle

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
`FileSystemDirectoryHandle`	86	86	No	No	72	No	No	86	No	No	No	14.0
`entries`	86	86	No	No	72	No	No	86	No	No	No	14.0
`getDirectoryHandle`	86	86	No	No	72	No	No	86	No	No	No	14.0
`getFileHandle`	86	86	No	No	72	No	No	86	No	No	No	14.0
`keys`	86	86	No	No	72	No	No	86	No	No	No	14.0
`removeEntry`	86	86	No	No	72	No	No	86	No	No	No	14.0
`resolve`	86	86	No	No	72	No	No	86	No	No	No	14.0
`values`	86	86	No	No	72	No	No	86	No	No	No	14.0