Window: showOpenFilePicker() 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 showOpenFilePicker()
method of the
Window
interface shows a file picker that allows a user to select a file
or multiple files and returns a handle for the file(s).
Syntax
showOpenFilePicker()
Parameters
options
Optional-
An object containing options, which are as follows:
excludeAcceptAllOption
Optional-
A boolean value that defaults to
false
. By default the picker should include an option to not apply any file type filters (instigated with the type option below). Setting this option totrue
means that option is not available. 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.
multiple
Optional-
A boolean value that defaults to
false
. When set totrue
multiple files may be selected. startIn
Optional-
A
FileSystemHandle
or a well known directory ("desktop"
,"documents"
,"downloads"
,"music"
,"pictures"
, or"videos"
) to open the dialog in. types
Optional-
An
Array
of allowed file types to pick. Each item is an object with the following options:description
Optional-
An optional description of the category of files types allowed. Defaults to an empty string.
accept
-
An
Object
with the keys set to the MIME type and the values anArray
of file extensions (see below for an example).
Return value
A Promise
whose fulfillment handler receives an Array
of FileSystemFileHandle
objects.
Exceptions
AbortError
DOMException
-
Thrown if the user dismisses the prompt without making a selection, or if the user agent deems any selected files too sensitive or dangerous.
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.
TypeError
-
Thrown if accept types can't be processed, which may happen if:
- Any key string of the
accept
options of any item intypes
options can't parse a valid MIME type. - Any value string(s) of the
accept
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. - The
types
options is empty and theexcludeAcceptAllOption
options istrue
.
- Any key string of the
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 of image file types, with no option to allow for all files types, or multiple file selection.
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 the selected file.
// create a reference for our file handle
let fileHandle;
async function getFile() {
// open file picker, destructure the one element returned array
[fileHandle] = await window.showOpenFilePicker(pickerOpts);
// run code with our fileHandle
}
Specifications
Specification |
---|
File System Access # api-showopenfilepicker |
Browser compatibility
BCD tables only load in the browser