Window: showDirectoryPicker() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The showDirectoryPicker() method of the Window interface displays a directory picker which allows the user to select a directory.

Syntax

showDirectoryPicker()
showDirectoryPicker(options)

An object containing options, which are as follows:

id Optional: By specifying an ID, the browser can remember different directories for different IDs. If the same ID is used for another picker, the picker opens in the same directory.
mode Optional: A string that defaults to "read" for read-only access or "readwrite" for read and write access to the directory.
startIn Optional: A FileSystemHandle or a well known directory ("desktop", "documents", "downloads", "music", "pictures", or "videos") to open the dialog in.

A Promise whose fulfillment handler receives a FileSystemDirectoryHandle object.

AbortError DOMException: Thrown if the user dismisses the prompt without making a selection, or if the user agent deems the selected directory to be too sensitive or dangerous, or if the PermissionStatus.state for the selected directory is not "granted" in the specified mode.
SecurityError DOMException: Thrown if the call was blocked by the same-origin policy or it was not called via a user interaction such as a button press.

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

This asynchronous function shows a directory picker and returns a FileSystemDirectoryHandle once selected.

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // run code for dirHandle
}

Specification
File System Access # api-showdirectorypicker