Automate file upload via a hidden file input element in Playwright
domain: playwright.dev · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Locate the file input element with page.locator('input[type=file]'); even if the input is hidden or styled with display:none, Playwright can interact with it directly
Call await fileInput.setInputFiles('/absolute/path/to/file.pdf') to assign one or more files to the input; Playwright handles hidden inputs without needing to make them visible
To upload multiple files at once, pass an array: fileInput.setInputFiles(['/path/a.png', '/path/b.png'])
For drag-and-drop upload zones that do not use a file input, use page.dispatchEvent() to fire a drop event with a DataTransfer object containing a File object constructed in page.evaluate()
Assert that the upload succeeded by waiting for a success indicator: await expect(page.getByText('Upload complete')).toBeVisible()
Known gotchas
setInputFiles() works on the input element itself, not on a styled button or overlay that triggers the file picker — locate the underlying input[type=file], not the visible button
Absolute paths are required; relative paths are resolved from the current working directory of the Node process, which may differ in CI — use path.resolve(__dirname, 'fixture.pdf') to be safe
For multi-step upload wizards that open a native OS file picker dialog, setInputFiles() bypasses the dialog entirely; if the page JavaScript validates the file picker event, this bypass may not trigger all validation logic
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?