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 insecure contexts (HTTPS), in some or allsupporting browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
TheshowDirectoryPicker()
method of theWindow
interface displays a directory picker which allows the user toselect a directory.
Syntax
showDirectoryPicker()showDirectoryPicker(options)
Parameters
options
OptionalAn object containing options, which are as follows:
id
OptionalBy specifying an ID, the browser can remember different directories for differentIDs. If the same ID is used for another picker, the picker opens in the samedirectory.
mode
OptionalA string that defaults to
"read"
for read-only access or"readwrite"
for readand write access to the directory.startIn
OptionalA
FileSystemHandle
or a well known directory ("desktop"
,"documents"
,"downloads"
,"music"
,"pictures"
, or"videos"
) to open the dialog in.
Return value
APromise
whose fulfillment handler receives aFileSystemDirectoryHandle
object.
Exceptions
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 specifiedmode
.SecurityError
DOMException
Thrown if the call was blocked by thesame-origin policy or it was not called via a user interaction such as a button press.
Security
Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.
Examples
This asynchronous function shows a directory picker and returns aFileSystemDirectoryHandle
once selected.
async function getDir() { const dirHandle = await window.showDirectoryPicker(); // run code for dirHandle}
Specifications
Specification |
---|
File System Access # api-showdirectorypicker |