Puppeteer FileChooser.accept is not able to find files uploaded to browserless

[Zhang]

Describe the bug
Browserless is unable to find my uploaded file when using puppeteer's fileChooser.accept method

To Reproduce
Steps to reproduce the behavior:

const fs = require('fs');
const puppeteer = require('puppeteer');
const request = require('request');

const browser = await puppeteer.connect({ browserWSEndpoint: `ws://localhost:3001`, slowMo: 15 });
const page = await browser.newPage()

await page.goto('https://cgi-lib.berkeley.edu/ex/fup.html');
const file = fs.readFileSync(YOUR PATH + '/form.pdf');

request.post({
  url: `http://localhost:3001/workspace`,
  formData: { custom_file: { value: file, options: { filename: 'form.pdf', contentType: 'application/pdf' } } },
}, async (err, res) => {
  const [fileChooser] = await Promise.all([
    page.waitForFileChooser(),
    page.click('input[type="file"]'),
  ]);
  
  await fileChooser.accept([JSON.parse(res.body)[0].path]);

  await page.click('input[type="submit"]');
});

Expected behavior
Expected behavior is that the file is uploaded properly. This works when running puppeteer headless w/out browserless. Instead, I receive the error: ENOENT: no such file or directory, open '/usr/src/app/workspace/form.pdf

Desktop (please complete the following information):

• Device: Mac
• OS: 10.12.6

Additional context
Attempted the exact script attached on puppeteer 5.0.0 and browserless/chrome:1.36.0-puppeteer-5.0.0 run with the command docker run --rm -p 3001:3000 -e "CONNECTION_TIMEOUT=600000 MAX_CONCURRENT_SESSIONS=10 USE_CHROMLE=true" browserless/chrome:1.36.0-puppeteer-5.0.0

I've gotten the same error prior when attempting w/ puppeteer 2.1.1 as well

[joelgriffith]

TL;DR:

All puppeteer versions seem to validate that the files being uploaded are on the file-system that puppeteer resides on (not on the remote file-system for browserless' case). You can run whatever version of browserless you want, so long as your puppeteer version is 3.0.0 or less -- and you don't need to upload the files to the docker container of browserless prior!

Long:
Ok, so after some deep diving, this is actually a bug in recent versions of puppeter. Puppeteer, less than 3.0.1, does a really interesting trick where they read the files from the puppeteer-side and load them via data URLs into chrome. That means it works both on connect as well as launch, and you don't need to upload the files to the browserless container. You can run whatever version of the service you want (I tried on several) so long as your puppeteer version is less than 3.0.1.

Starting in 3.0.1, puppeteer no longer reads these files into chromium via data-URI's. Instead, it opts to let chromium read them from the file-system, which breaks connected browser sessions since puppeteer validates that the files are on it's file-system, but not on the file-system that's running chromium.

[joelgriffith]

You can also read this comment which has another potential workaround: puppeteer/puppeteer#4405 (comment)

[Zhang]

I wanted to follow up on this and note that 2.1.1 is likely the best version of puppeteer to use w/ fileChooser in this way.

2.0.0 has the multiple connections bug because it ships w/ an incompatible version of chromium

Also, if you're NOT using file choose, and uploading via await uploadElement.uploadFile(filePath); you'll need to watch out for pages CSP blocking your uploads, setting await page.setBypassCSP(true); should work a fair amount of time