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?

Uncaught (in promise) TypeError: window.showOpenFilePicker() is not a function

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;

<!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?

Share Improve this question asked Oct 15, 2021 at 22:42 Lagu Longa 2111 gold badge2 silver badges10 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 13

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: https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker

The problem is most likely your browser. As of March 2023, this feature is only supported on three browsers (Chrome, Edge, Opera), and is classed as an experimental feature even on those.

See the API doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function - Stack Overflow

Uncaught (in promise) TypeError: window.showOpenFilePicker() is not a function

Uncaught (in promise) TypeError: window.showOpenFilePicker() is not a function

2 Answers 2

与本文相关的文章

评论列表(0)