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).
window.showOpenFilePicker();
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);
}