puppeteer: FileChooser.accept doesn't work on file dialogs not associated with an input element

Here is my code

[nodeJs]

const puppeteer = require('puppeteer');

class App {

    private static ROOT_PATH:string = "D:/WWW/test_puppeteer_file_access/"
    private static CLIENT_PATH:string = "http://127.0.0.1/edsa-LocalHost_D/test_puppeteer_file_access/src/index.html";
    private page:any;

    constructor(){
        this.init();
    }

    async init(){
        let browserConfig = {
            executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
            headless:false,
            devtools:true,
            args:["--enable-blink-features=WebCodecs",
                  "--enable-experimental-web-platform-features",
                  "--file-handling-api",
                  "--enable-features=MediaFoundationAsyncH264Encoding"
                ]
        }
        
        let pageViewport = {
            width:800,
            height:450,
            deviceScaleFactor:1
        }

        const browser = await puppeteer.launch(browserConfig); 
        
        this.page = await browser.newPage();
        this.page.setViewport(pageViewport)
        await this.page.goto(App.CLIENT_PATH);


        let futureFileChooser = await this.page.waitForFileChooser();
        await this.page.click('#fileSelectionBtn') 
        let fileChooser = await futureFileChooser;

        console.log("fileChooser = ",fileChooser)
        await fileChooser.accept(['/myfile.mp4']); 
    }
}
new App();

[/nodeJs]

[WebPage]

<html>
    <body>
        <script>
            let btn = document.createElement("div");
            btn.id = "fileSelectionBtn"
            btn.style.width = btn.style.height = "100px";
            btn.style.backgroundColor = "#cccccc";
            document.body.appendChild(btn);

            async function saveFile() {
                const options = {
                    types: [{
                    description: 'video file',
                    accept: {'video/mp4': ['.mp4']},
                    }],
                };
                const newHandle = await window.showSaveFilePicker(options);
                console.log("fileHandle => ",newHandle);
            }
            btn.onclick = ()=>{ saveFile(); } 
        </script>
    </body>
</html>

[/WebPage]

I tryed different file paths :

 await fileChooser.accept(['/myfile.mp4'])
 await fileChooser.accept(['./myfile.mp4'])
 await fileChooser.accept(['D:/WWW/test_puppeteer_file_access/myfile.mp4'])
 await fileChooser.accept(['D:\\WWW\\test_puppeteer_file_access\\myfile.mp4'])
 await fileChooser.accept(['http://127.0.0.1/edsa-LocalHost_D/test_puppeteer_file_access/myfile.mp4']);
 await fileChooser.accept(['http:\\\\127.0.0.1\\edsa-LocalHost_D\\test_puppeteer_file_access\\myfile.mp4']);

I also tryed another way to proceed (the one given here : https://pptr.dev/#?product=Puppeteer&version=v9.1.1&show=api-class-filechooser )

const [fileChooser] = await Promise.all([
      page.waitForFileChooser(),
      page.click('#btn'), // some button that triggers file selection
    ]);
  await fileChooser.accept(['/tmp/myfile.pdf']);

(the way I proceed in my code is described here : https://pub.dev/documentation/puppeteer/latest/puppeteer/FileChooser-class.html )

But it doesn’t work in any case… The fileChooser appears but never close, so no file is selected…

Actually, the problem come from “waitForFileChooser” ; the promise never resolve

Please help, I want to open a file that doesn’t exist yet (to save it) in a folder contained in my puppeteer project. I do not know what to do…

I’m using Windows 10 and Puppeteer v9.1.1

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 2
  • Comments: 21

Most upvoted comments

Tried @kaibadash example with 17.1.3 and also 19.2.2 but I get a different error:

ProtocolError: Protocol error (DOM.resolveNode): Either nodeId or backendNodeId must be specified. at /Users/azarai/Downloads/puppeteer_native_file_system_api_sample-main/puppeteer/node_modules/puppeteer-core/src/common/Connection.ts:400:16 at new Promise (<anonymous>) at CDPSessionImpl.send (/Users/azarai/Downloads/puppeteer_native_file_system_api_sample-main/puppeteer/node_modules/puppeteer-core/src/common/Connection.ts:396:12) at IsolatedWorld.adoptBackendNode (/Users/azarai/Downloads/puppeteer_native_file_system_api_sample-main/puppeteer/node_modules/puppeteer-core/src/common/IsolatedWorld.ts:598:41) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async CDPPage._CDPPage_onFileChooser (/Users/azarai/Downloads/puppeteer_native_file_system_api_sample-main/puppeteer/node_modules/puppeteer-core/src/common/Page.ts:324:21)

We’re marking this issue as unconfirmed because it has not had recent activity and we weren’t able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

We’re marking this issue as unconfirmed because it has not had recent activity and we weren’t able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

@ForbiddenEra sometimes messages are missed or no time to respond. I think from your message it was not clear that you used the same reproducible example, that’s why I asked for a fresh repro. And indeed on the latest versions the bug looks different, so filing a new issue would be the way to go. The browser sends a Page.fileChooserOpened event but it does not send which element the dialog is associated with.

To be fair, from a user perspective, performing the same action and having it not work seems like basically the same issue. I shouldn’t have to know or care about any internals such as you mentioned in order to know how to classify bug reports. It’s highly discouraged to open duplicate issues in projects, especially larger projects that have thousands of issues - thus I searched, found an issue that matched mine and added a reply instead of creating a new issue without searching, as many do and are scolded for it.

And, in fact, if anything, it was my knowledge about Puppeteer/Chromium that made me consider that, while the error messages might not be identical, that the issue is likely one and the same and any variation is due to the constant flux between the two projects.

I do appreciate that it seems you’re looking into it still, however. To be honest though, this issue affected a side project I was messing around with - wrapper for ChatGPT4v since it wasn’t available via API yet - being that it was a side project AND no longer really applicable and I don’t for see myself using that functionality anytime soon, I really can’t justify the time to create a new issue, unfortunately.

If you want to with my information, feel free; hopefully my addition benefits the community in some way and hopefully those who need it will be able to use this feature sometime, though as you seem to have pointed out, it’s blocked upstream anyhow.

Best of luck, cheers!

@ForbiddenEra please open a new issue with a reproducible example

Sorry, but can you explain what the purpose for doing that would be when it’s the same issue and this one is still open? I don’t see the logic in having multiple issue threads for the same issue and that’s literally the exact opposite of the norm.

I believe that should have been solved by crbug.com/1332511 Could someone re-try in the most recent version? Please re-open a new issue with all details if it still happens.

Please help !