[BUG] setInputFiles does fetch that fails due to CSP

[sadiqueimam]

Hi, I am trying to upload a file but getting below error:
Error: Evaluation failed: TypeError: Failed to fetch
at playwright_evaluation_script:3:30
at Array.map ()
at playwright_evaluation_script:2:46
at CRExecutionContext.evaluate

Code:
const drop= await page.waitForSelector("//input[@type='file']");
await drop.setInputFiles('pic.png')

Also, the same was working with below Puppeteer code:
const drop= await page.waitForXPath("//slot/input[@type='file']");
await drop.uploadFile('pic.png');

[JoelEinbinder]

Can you provide a small script that reproduces the problem? I tried and was unable to:

const {chromium} = require('playwright');
chromium.launch().then(async browser => {
    const [page] = await browser.defaultContext().pages();
    await page.setContent(`<input type="file">`);
    const input = await page.$('input');
    await input.setInputFiles('index.js');
    await browser.close();
});

[sadiqueimam]

I have tried the code and it works fine if the button is clickable but in my scenario the button is kind overlays by a label. If I do drop.click(); it fails so I tried drop.setInputFiles('pic.png') but this doesnt seem to work for me. Is it an open issue?

[dgozman]

Clickability should not affect setInputFiles, so the reason should be something else. If you could share the page where this does not work (a link or maybe saved as mhtml), I would be happy to take a look. Thank you!

[dgozman]

Closing because we cannot repro this for a while. Feel free to reopen if this is still an issue.

[jacobmesu]

This error occurs when content security policy on document is enabled. Fix it by disabling CSP by setting bypassCSP to true in newContext method.

[ghost]

Disabling CSP fixed it for me as well, thanks for the hint.

(There should be a user-editable (possibly via PRs) FAQ section on playwright.dev where people can put their HOWTOs, tips & tricks and so on.)

@JoelEinbinder @dgozman Is disabling CSP the only/right way to make file upload work in this case? Because disabling it may have side effects (e.g. on my page, after disabling CSP I get a cookie consent modal displayed). If disabling CSP should not be the right way and if you're still interested in a repro case, I could provide on. In my case, if CSP is not disabled, I get the following error message when setInputFiles ( await page.setInputFiles('#income-upload', 'uploads/pirate.jpg'); ) is executed:

pw:api => page.focus started +1ms
pw:api waiting for selector "text=Ziehen Sie die hochzuladenden Dateien in diesen Bereich" [] +0ms
pw:api selector resolved to visible Ziehen Sie die hochzuladenden Dateien in diesen B… [] +4ms
pw:api <= page.focus succeeded +5ms
pw:api => page.setInputFiles started +0ms
pw:api waiting for selector "#income-upload" [] +0ms
pw:api selector resolved to hidden <input multiple type="file" tabindex="-1" id="income-up…/> [] +3ms
pw:api <= page.setInputFiles failed +21ms
Error: page.setInputFiles: Evaluation failed: TypeError: Failed to fetch
at __playwright_evaluation_script__3:893:34
at Array.map ()
at InjectedScript.setInputFiles (__playwright_evaluation_script__3:892:50)
at eval (__playwright_evaluation_script__1123:1:40)
at UtilityScript.callFunction (__playwright_evaluation_script__4:305:24)
at UtilityScript. (__playwright_evaluation_script__1124:1:44)
=========================== logs ===========================
[api] waiting for selector "#income-upload"
[api] selector resolved to hidden <input multiple type="file" tabindex="-1" id="income-up…/>
============================================================
Note: use DEBUG=pw:api environment variable and rerun to capture Playwright logs.
at CRExecutionContext.evaluateWithArguments (/[...]/ta-playwright/node_modules/playwright/lib/chromium/crExecutionContext.js:53:19)
at evaluateExpression (/[...]/ta-playwright/node_modules/playwright/lib/javascript.js:164:16)
at FrameManager.waitForSignalsCreatedBy (/[...]/ta-playwright/node_modules/playwright/lib/frames.js:90:24)
at FrameExecutionContext.evaluateInternal (/[...]/ta-playwright/node_modules/playwright/lib/dom.js:36:16)
at CRPage.setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/chromium/crPage.js:210:9)
at /[...]/ta-playwright/node_modules/playwright/lib/dom.js:440:13
at FrameManager.waitForSignalsCreatedBy (/[...]/ta-playwright/node_modules/playwright/lib/frames.js:90:24)
at ElementHandle._setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/dom.js:438:9)
at /[...]/ta-playwright/node_modules/playwright/lib/frames.js:674:32
at ProgressController.run (/[...]/ta-playwright/node_modules/playwright/lib/progress.js:75:28)
at Frame.setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/frames.js:737:9)
-- ASYNC --
at Frame.setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/helper.js:79:23)
at /[...]/ta-playwright/node_modules/playwright/lib/page.js:407:61
at Page._attributeToPage (/[...]/ta-playwright/node_modules/playwright/lib/page.js:370:20)
at Page.setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/page.js:407:21)
at Page.setInputFiles (/[...]/ta-playwright/node_modules/playwright/lib/helper.js:80:31)
at /[...]/ta-playwright/test/e2e/e2e-dcc.ts:229:24
at step (e2e-dcc.ts:34:23)
at Object.next (e2e-dcc.ts:15:53)
at fulfilled (e2e-dcc.ts:6:58)

[dgozman]

(There should be a user-editable (possibly via PRs) FAQ section on playwright.dev where people can put their HOWTOs, tips & tricks and so on.)

You can send a PR editing documentation source, it will be reflected on playwright.dev.

As for the fetch error, let me take a look. Disabling CSP is a big hammer, so I'd prefer another solution.

[ghost]

@dgozman Thanks for pointing out the link to the documentation source.

Also thanks for looking again into this error. I have sent you the repro URL via email.