Playwright · Reliable end-to-end tests

How do you upload a file in Playwright?

Easyfile uploadinputfilechooserUpdated Oct 2026

Short answer

Use locator.setInputFiles() with a path, a buffer or a file payload. For a button that opens a picker, use the filechooser event; for hidden inputs, target the input directly.

Most uploads are file inputs, even when the visible UI is a styled drop zone or button. If the input exists in the DOM, setInputFiles is the simplest and most reliable approach because it does not depend on the operating system picker.

await page.getByLabel("Resume").setInputFiles("fixtures/resume.pdf");

await page.getByLabel("Avatar").setInputFiles({
  name: "avatar.png",
  mimeType: "image/png",
  buffer: Buffer.from("fake-image-bytes"),
});

A path is convenient for a real fixture; an in-memory payload avoids committing binary files.

Three common patterns

setInputFiles(path) for an input that is already in the DOM
setInputFiles([]) to clear an existing selection
The filechooser event when a button opens the native picker
A buffer payload when the file content is generated by the test
setInputFiles on a hidden input when the visible control is only a label

const chooserPromise = page.waitForEvent("filechooser");
await page.getByRole("button", { name: "Upload" }).click();

const chooser = await chooserPromise;
await chooser.setFiles("fixtures/resume.pdf");
await expect(page.getByText("resume.pdf")).toBeVisible();

The chooser event handles a control that opens the operating system picker.

Register the filechooser wait before clicking, for the same reason as a popup wait: the event can fire before a listener is attached. After the upload, assert on the visible filename or a success message rather than only on the input value.

Large real files make the suite slow and repositories heavy. Prefer a small representative fixture or a generated buffer unless the test specifically verifies parsing or size limits.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1How do you upload a file when the input is hidden?
2How do you clear a file selection?
3When do you need the filechooser event?
4Why is a buffer payload useful?

Say it in the interview

If there is a file input in the DOM, I call setInputFiles on it with a fixture path or an in-memory buffer. If a button opens the operating system picker, I wait for the filechooser event and set the file there. I always set up the wait before clicking. Then I assert on the visible result, such as the filename or a success message, not just the input value.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Playwright mock interview and get scored feedback on depth, clarity and confidence.

Start a free Playwright interview Browse all questions

Three common patterns

Follow-ups you should expect

Related questions

Now say it out loud.