Unable to intercept FileChooser when invoked from window.chooseFileSystemEntries #5210

agnivade · 2019-11-30T13:30:15Z

This is both an issue with puppeteer and Chromium. I am raising an issue here in the hope that it gets more eyes than in the Chromium issue tracker.

Steps to reproduce

Tell us about your environment:

Puppeteer version:2.0.0
Chromium: 78.0.3904.70 and 80.0.3982.0
Platform / OS version:Ubuntu 4.15.0-45
URLs (if applicable):
Node.js version:10.16.3

Basically, I am calling window.chooseFileSystemEntries which is a new functionality introduced in Chrome 78 to access the native filesystem. (https://web.dev/native-file-system/). And then I want to intercept the opening of the file dialog, and pass a file path to it.

Unfortunately, the event does not get intercepted. Whereas, it clearly does, when I manually invoke a file opener dialog from an input[type="file"].

I think since this is a bleeding edge feature, perhaps this follows a different code path from inside Chrome, due to which the event handler is unable to intercept it.

What steps will reproduce the problem?

Please include code that reproduces the issue.

HTML file:

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>File access</title>
</head>

<body>
	<input type="file" name="ff" id="open2">
	<button id="openFile">Open file</button>
	<script>
	document.getElementById("openFile").addEventListener('click', async (e) => {
  	const fileHandle = await window.chooseFileSystemEntries();
  	const file = await fileHandle.getFile();
  	const contents = await file.text();
  	console.log(contents);
	});
	</script>
</body>
</html>

Serve this HTML file using any local web server.

JS Code

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
  	headless: false, 
  	executablePath: '/path/to/chromium_tip',
  	args: [
  		'--flag-switches-begin',
  		'--enable-features=NativeFileSystemAPI',
  		'--flag-switches-end',
  	]
  });
  const page = await browser.newPage();
  await page.goto('http://localhost:8080/file.html');

  const [fileChooser] = await Promise.all([
	  page.waitForFileChooser(),
	  page.click('#openFile'), // trying to #open2 works
	]);
	// await fileChooser.accept(['/home/agniva/Desktop/sticky_note.txt']);
	console.log(fileChooser);
	await page.waitFor(1000);
  await browser.close();
})();

What is the expected result?

There are couple of issues here.

When I click #openFile, the filechooser dialog does not get intercepted at all. I can see the dialog, and after 30 secs, it times out with:

(node:11168) UnhandledPromiseRejectionWarning: TimeoutError: waiting for waiting for file chooser failed: timeout 30000ms exceeded

But if I change it to click #open2, everything works perfectly fine. And fileChooser gets logged properly.

This is a problem with Chromium.

The page.handleFileChooser API is removed from Chromium 80 at chromium/chromium@41361e4. So therefore, using fileChooser.accept with Chromium 80 raises an error. This is something to be fixed at puppeteer. The API needs to use the new fields at https://chromedevtools.github.io/devtools-protocol/tot/Page#event-fileChooserOpened to call the https://chromedevtools.github.io/devtools-protocol/tot/DOM#method-setFileInputFiles method.

The commit also moved the dialog interception from browser-side to blink-side. I hoped that it will make a difference in intercepting dialogs invoked from window.chooseFileSystemEntries but it does not. The same failure to interception occurs with Chrome 78 too.

/cc @pavelfeldman who made the commit.

For further context: I work on WebAssembly with the Go team. Not being able to read/write files has prevented us from running the Go test suite inside the browser, which has failed to catch several bugs. Currently, we run tests inside Node. But resolving this issue will allow us to run the test suite inside the browser too.

The text was updated successfully, but these errors were encountered:

DJ-Glock · 2020-01-29T15:45:30Z

Same issue.

@agnivade did you develop any workaround for this?

agnivade · 2020-01-29T18:52:20Z

Nope, still waiting on the Chrome/puppeteer team to come back with something.

DJ-Glock · 2020-01-30T10:17:03Z

@agnivade am I right thinking that waitForFileChooser does not work with Chromium 80+ at all? In my case it doesn't. But I did not see any errors.

DJ-Glock · 2020-01-30T11:54:05Z

#5363

alansyue1020 · 2020-02-04T08:30:12Z

@DJ-Glock I try to downgrade Chromium version, and it works!

agnivade · 2020-02-04T09:01:21Z

Hey all, the original issue was about FileChooser not being intercepted if invoked from window.chooseFileSystemEntries. FileChooser not working at all is a regression in puppeteer which got fixed at tip recently. Let's keep this thread on track :)

agnivade · 2020-02-22T20:49:32Z

Bumping some important people again in the hope someone takes a look at this: @mathiasbynens @pavelfeldman @dmitshur

koresar · 2020-03-16T11:26:20Z

Which version of puppeteer I should downgrade to if I want this working asap?

mvdan · 2020-03-16T11:27:54Z

@koresar as far as we know, window.chooseFileSystemEntries has never worked with Chrome DevTools (puppeteer, chromedp, etc) since it's a fairly new and unstable API.

DJ-Glock · 2020-03-16T11:32:58Z

@koresar fileChooser works fine for me with puppeteer 2.0.0 with HeadlessChrome/79.0.3945.0 (wich is part of puppeteer)

koresar · 2020-03-16T11:49:52Z

Thank you people. Sound like I have an error of a different kind. Weird, but this code does networking, I think.

const [fileChooser] = await Promise.all([
  page.waitForFileChooser(),
  page.click(".upload-indicator button") // some button that triggers file selection
]);
await fileChooser.accept([`${__dirname}/file.txt`]);

But I need, well, to just choose a file.

DJ-Glock · 2020-03-17T19:02:24Z

@koresar what error do you get finally? What is the puppeteer / chromium version?

koresar · 2020-03-17T21:07:18Z

I'm getting

Error: Evaluation failed: TypeError: Failed to fetch
at __puppeteer_evaluation_script__:4:32

somewhere within JSHandle.js.

I assume it tries to upload file. However, the Angular app I'm trying to automate with puppeteer does not do that.

koresar · 2020-03-18T04:42:08Z

Ok. Here is my bug.
#5503
Looks unrelated to this issue.

stale · 2022-06-26T20:42:30Z

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.

stale · 2022-07-26T20:58:59Z

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!

Mohsen7s · 2022-10-31T07:24:20Z

This issue still exist and the only fix to this is downgrading to 4 years old chrome ver 78. Please re-open and start investigation to solve

osuvorova · 2022-11-23T16:25:53Z

Same problem for me.

pondorasti · 2022-12-14T19:17:23Z

Running into the same problem....:/

LMeiraba · 2023-03-11T13:00:56Z

same here :(

agnivade mentioned this issue Nov 30, 2019

Unable to intercept FileChooserDialog when invoked from window.chooseFileSystemEntries chromedp/chromedp#528

Open

orsinium mentioned this issue Feb 10, 2020

Run examples agnivade/wasmbrowsertest#14

Closed

stale bot added the unconfirmed label Jun 26, 2022

stale bot closed this as completed Jul 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Unable to intercept FileChooser when invoked from window.chooseFileSystemEntries #5210

Unable to intercept FileChooser when invoked from window.chooseFileSystemEntries #5210

agnivade commented Nov 30, 2019

DJ-Glock commented Jan 29, 2020

agnivade commented Jan 29, 2020

DJ-Glock commented Jan 30, 2020

DJ-Glock commented Jan 30, 2020

alansyue1020 commented Feb 4, 2020

agnivade commented Feb 4, 2020

agnivade commented Feb 22, 2020

koresar commented Mar 16, 2020

mvdan commented Mar 16, 2020

DJ-Glock commented Mar 16, 2020 •

edited

koresar commented Mar 16, 2020 •

edited

DJ-Glock commented Mar 17, 2020

koresar commented Mar 17, 2020

koresar commented Mar 18, 2020

stale bot commented Jun 26, 2022

stale bot commented Jul 26, 2022

Mohsen7s commented Oct 31, 2022

osuvorova commented Nov 23, 2022

pondorasti commented Dec 14, 2022

LMeiraba commented Mar 11, 2023

Unable to intercept FileChooser when invoked from window.chooseFileSystemEntries #5210

Unable to intercept FileChooser when invoked from window.chooseFileSystemEntries #5210

Comments

agnivade commented Nov 30, 2019

Steps to reproduce

DJ-Glock commented Jan 29, 2020

agnivade commented Jan 29, 2020

DJ-Glock commented Jan 30, 2020

DJ-Glock commented Jan 30, 2020

alansyue1020 commented Feb 4, 2020

agnivade commented Feb 4, 2020

agnivade commented Feb 22, 2020

koresar commented Mar 16, 2020

mvdan commented Mar 16, 2020

DJ-Glock commented Mar 16, 2020 • edited

koresar commented Mar 16, 2020 • edited

DJ-Glock commented Mar 17, 2020

koresar commented Mar 17, 2020

koresar commented Mar 18, 2020

stale bot commented Jun 26, 2022

stale bot commented Jul 26, 2022

Mohsen7s commented Oct 31, 2022

osuvorova commented Nov 23, 2022

pondorasti commented Dec 14, 2022

LMeiraba commented Mar 11, 2023

DJ-Glock commented Mar 16, 2020 •

edited

koresar commented Mar 16, 2020 •

edited