How to upload files using Playwright?

To upload a file using Playwright use setInputFiles(selector, files[, options]) function. This method takes the selector of the input element and the path to the file you want to upload.

The files parameter value can be a relative path (relative to the current working directory) or an absolute path. I strongly suggest that you use an absolute path to ensure predictable behavior.

test("upload a file", async ({ page }) => {
  console.log(resolve(__dirname, "bar.png"));

  await page.goto("http://127.0.0.1:8080/upload-file/");
  await page.locator('input[name="foo"]').click();
  await page
    .locator('input[name="foo"]')
    .setInputFiles(resolve(__dirname, "bar.png"));

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

Alternatively, you can read the file into a Buffer and dispatch drop event onto the target element with DataTransfer payload. This is useful when you are testing a drag-and-drop area:

const dataTransfer = await page.evaluateHandle(
  async ({ fileHex, localFileName, localFileType }) => {
    const dataTransfer = new DataTransfer();

    dataTransfer.items.add(
      new File([fileHex], localFileName, { type: localFileType })
    );

    return dataTransfer;
  },
  {
    fileHex: (await readFile(resolve(__dirname, "bar.png"))).toString("hex"),
    localFileName: fileName,
    localFileType: fileType,
  }
);

await page.dispatchEvent("#drop_zone", "drop", { dataTransfer });

await expect(page.locator("text=bar.png")).toBeVisible();

You can further simplify the above code using createDataTransfer utility from playwright-utilities:

const dataTransfer = await createDataTransfer({
    page,
    filePath: resolve(__dirname, "bar.png"),
    fileName: "bar.png",
    fileType: "image/png",
  });

await page.dispatchEvent("#drop_zone", "drop", { dataTransfer });

await expect(page.locator("text=bar.png")).toBeVisible();

Try this example locally by cloning the Playwright Playground repository:

git clone --branch test/upload-file https://[email protected]/punkpeye/playwright-playground.git
cd playwright-playground
npm install
npx playwright test tests/upload-file