File upload doesn't work

[VikramTiwari]

Steps to recreate:

• Run following code:

const playwright = require("playwright");

(async () => {
  const browser = await playwright["chromium"].launch({ headless: false });
  const context = await browser.newContext();
  await context.newPage("https://cgi-lib.berkeley.edu/ex/fup.html");
})();

• Click on "Choose File"

Expectation: A file chooser dialog will appear
Result: No dialog appears

This bug is causing file uploads to not work.

[arjunattam]

Thanks @VikramTiwari. If you want to upload files, you can use the setInputFiles API on ElementHandle (docs). Example snippet below.

const playwright = require("playwright");

(async () => {
    const browser = await playwright["chromium"].launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage("https://cgi-lib.berkeley.edu/ex/fup.html");

    const handle = await page.$('input[type="file"]');
    await handle.setInputFiles('example.png');
})();

[VikramTiwari]

@arjun27 That looks fantastic! Thanks!

Up to you on if you wanna keep the bug open.

Though if I was testing (visually) that wether a modal will appear on click of that input box, I wouldn't be able to do that.

[arjunattam]

Thanks @VikramTiwari. Yes, that is a limitation. It is possible to intercept the file chooser dialog. Would that help?

page.on('filechooser', async ({ element, multiple }) => {
    console.log('intercepting filechooser');
    await element.setInputFiles('example.png');
});

[VikramTiwari]

That's super helpful.

Though probably let's keep the issue open until we have a solution for UI interface.

[anamatvienko]

Hey @arjunattam, sorry for commenting on a closed issue, I have stumbled upon the inability to upload the file in the webkit on the web app that is not public, and I thought that it might be my problem, then I found out this ticket and I tried the similar script that you provided above on the same website (https://cgi-lib.berkeley.edu/ex/fup.html), just to rule out the theory that it is not me and/or the webapp I'm testing, but it does look like the file just does not get uploaded in the webkit there as well, however it works perfectly fine with chromium and firefox, there are no errors in the logs too, or at least I did not see them (ran with DEBUG=pw:*). I thought that it might be the webkit issue, however, I was able to upload the file on the other sample website (https://uppy.io/examples/xhrupload/), using the same script.
Is it the way how the file upload is implemented on the web app that somehow "fails" with webkit? Are there any other workarounds available?
UPD: forgot to mention that I'm using playwright version 1.5.2.
System is macOS Catalina, version 10.15.6

Thank you in advance!

[adelara]

Hmm... i really dont want to intercept the file dialog; I want to actually type in the filename in the browser's file explorer.
Is that possible ?
---------- edited -------------
Got it !!! https://playwright.dev/docs/api/class-filechooser
This will load the file by itself in one step (as if one hits the button to open the file browser, search and hit enter)

        var rickFile = '/somePlace/directory/to/RickSanchez.png'
        const [ fileChooser ] = await Promise.all([
            this.getPage().waitForEvent('filechooser'),
            // This actually opens the file chooser (my class extends some other that has everything in it)
            this.locator( this.map.avatarSelButton ).click()
        ]);
        await fileChooser.setFiles( rickUri );