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).
A Promise
whose fulfillment handler receives an Array
of FileSystemFileHandle
objects.
Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.
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.
let fileHandle;
async function getFile() {
[fileHandle] = await window.showOpenFilePicker(pickerOpts);
}