uploadFile doesn't work with puppeteer.connect

Steps to reproduce

Currently when used inputElement.uploadFile via puppeteer.connect, it uploads an empty file, as it doesn’t exist on host machine. I believe this is a DevTools limitation and there’s no possible workaround except uploading the file to remote puppeteer’s host.

What steps will reproduce the problem?

1. const page = await puppeteer.connect(/* ... */);
2. const input = await page.$('input[type="file"]');
3. await input.uploadFile('./this/will/upload/an/empty/file');

What is the expected result?

• uploaded files are serialised before sent to devtools instead of their file paths,
• or an error thrown saying this is not supported via connect.

What happens instead?

Puppeteer silently uploads an empty payload.

[bloeys]

Thanks a lot for the tip @mathiasbynens, it was really helpful!

For anyone facing issues uploading with puppeteer, here is the code I went with that finally worked

const fileToUpload = {
  name: 'myFileName',
  content: fs.readFileSync('/file/path').toString(),
  mimeType: 'text/plain', // This will depend on your case
}

await page.evaluate(async (fileToUpload) => {

  //Create blob and file from file string
  const b = new Blob([fileToUpload.content], { type: fileToUpload.mimeType })
  const dt = new DataTransfer();
  dt.items.add(new File([b], fileToUpload.name));

  //Simulate drag and drop on your input field using DataTransfer class
  ele = document.querySelector('input[type=file]')
  ele.files = dt.files;
  ele.dispatchEvent(new Event('input', { bubbles: true }));
  ele.dispatchEvent(new Event('change', { bubbles: true }));
}, fileToUpload);

I hope this helps someone, instead of spending days working with and around puppeteer file upload.

However, @mathiasbynens do you have an idea of why the builtin calls (I see there is a CDP call in newer versions) in puppeteer don’t work? It would be nice to understand why that happened.

Thanks again for your help.

[joelgriffith]

Since puppeteer verifies that files are present on its local file-system, then this breaks connected sessions in an unintuitive way. Versions <= 3.0.0 handled this pretty well, but at the cost of sending more data over the network.

Is it possible to make it more graceful? For instance, if it’s aconnected session then do the DataTransfer method, otherwise puppeteer can just pass the list of files over to chromium? Happy to do a PR, just don’t want to waste the time if it’s not viable.