How to upload a file with puppeteer and dropzone?

Question

I use puppeteer and I have a dropzone form.

I want to add a file from chrome headless to the dropzone form.

How can I do that?

Note: The form contains some actions in some dropzone events (when added file).

Unhouse

Could you show a minimal reproducible example of the dropzone form you want to upload to along with a code snippet of your attempt? Thanks! – Amadis

Answer 1

Not sure if I understood the problem correctly, but try this:

const dropZoneInput = await page.$(inputID);
dropZoneInput.uploadFile(absolutePathToFile);

Findlay

This is not working for me. I did not trigger the dropzone.js feature. – Hearne

Answer 2

I have it working with puppeteer:

const fileInput = await page.$(
    ".{yourDropzoneClassName} input[type=file]"
);
await fileInput.uploadFile("path/to/file");

Cambridge

Upvoting since there's no good reason to downvote this with no explanation. – Maddie

Answer 3

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    ignoreDefaultArgs: true
  });
  const page = await browser.newPage();
  await page.goto('https://react-dropzone.js.org/');
  await page.waitForSelector('input[type=file]');
  const fileInput  = await page.$('#rsg-root > div > main > section > section:nth-child(3) > section > section:nth-child(1) > article > div:nth-child(2) > div.rsg--preview-60 > div > section > div > input[type=file]');
  await fileInput.uploadFile("./test/playground.js");

  ///trigger event
  await fileInput.evaluate(upload => upload.dispatchEvent(new Event('change', { bubbles: true })));
  ///

  await page.close();
})();

Kwakiutl