Window: showOpenFilePicker() method

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.

TheshowOpenFilePicker() method of theWindow interface shows a file picker that allows a user to select a fileor multiple files and returns a handle for the file(s).

Syntax

showOpenFilePicker()showOpenFilePicker(options)

Parameters

optionsOptional

An object containing options, which are as follows:

excludeAcceptAllOptionOptional

A boolean value that defaults tofalse. By default the picker should include an option to not applyany file type filters (instigated with the type option below). Setting this optiontotrue means that option isnot available.

idOptional

By 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.

multipleOptional

A boolean value that defaults tofalse. Whenset totrue multiple files may be selected.

startInOptional

AFileSystemHandle or a well known directory ("desktop","documents","downloads","music","pictures", or"videos") to open the dialog in.

typesOptional

AnArray of allowed file types to pick. Eachitem is an object with the following options:

descriptionOptional: An optional description of the category of files types allowed. Defaults to an empty string.
accept: AnObject with the keys set to theMIME type and the values anArray of file extensions (see belowfor an example).

Return value

APromise whose fulfillment handler receives anArray ofFileSystemFileHandle objects.

Exceptions

AbortErrorDOMException

Thrown if the user dismisses the prompt without making a selection, orif the user agent deems any selected files too sensitive or dangerous.

SecurityErrorDOMException

Thrown if the call was blocked by thesame-origin policy or it was not called via a user interaction such as a button press.

TypeError

Thrown if accept types can't be processed, which may happen if:

Any key string of theaccept options of any item intypes options can't parse a valid MIME type.
Any value string(s) of theaccept options of any item intypes options is invalid, for example, if it does not start with. and if end with., or if it contains any invalid code points and its length is more than 16.
Thetypes options is empty and theexcludeAcceptAllOption options istrue.

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

Here we set the options object for passing into the method. We'll allow a selection ofimage file types, with no option to allow for all files types, or multiple fileselection.

const pickerOpts = {  types: [    {      description: "Images",      accept: {        "image/*": [".png", ".gif", ".jpeg", ".jpg"],      },    },  ],  excludeAcceptAllOption: true,  multiple: false,};

Next we can create an asynchronous function which show the file picker and return theselected file.

// create a reference for our file handlelet fileHandle;async function getFile() {  // open file picker, destructure the one element returned array  [fileHandle] = await window.showOpenFilePicker(pickerOpts);  // run code with our fileHandle}