Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function
Matthew Harrington 
Uncaught (in promise) TypeError: window.showOpenFilePicker() is not a function
I am trying to experiment with reading and writing in File System Web API but I keep getting TypeError Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function, I have no idea what is going.
Here is react code snippet:
const FileReader = () => { const openThisFile = async () => { const [fileHandle] = await window.showOpenFilePicker(); // error: Property 'showOpenFilePicker' does not exist on type 'Window & typeof globalThis' console.log(fileHandle); }; return ( <div> <button onClick={openThisFile}>Open file</button> </div> );
};
export default FileReader;And so I thought it's not working in react and then I tried Vanilla Javascript but still I keep getting TypeError Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function in the console. Here is the code snippet.
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Open file</title> </head> <body> <button onclick="getFile()">Open file</button> <script> const pickerOpts = { types: [ { description: "Images", accept: { "image/*": [".png", ".gif", ".jpeg", ".jpg"], }, }, ], excludeAcceptAllOption: true, multiple: false, }; let fileHandle; async function getFile() { [fileHandle] = await window.showOpenFilePicker(pickerOpts); // run code with our fileHandle } console.log(fileHandle); </script> </body>
</html>Any idea on what I am doing wrong?
1 Answer
I suppose you are seeing the issue above because of the following:
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Consider looking into the docs:
2
