Window: showDirectoryPicker() method

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.




options Optional

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.

Return value

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


File System Access
# api-showdirectorypicker

Browser compatibility

BCD tables only load in the browser

See also