[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.

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.

@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.