playwright file upload testing: setInputFiles guide

Not specified by the original author.

TL;DR

Use setInputFiles() on the file input with a fixture path. It works even when the input is hidden, needs no native dialog handling, and accepts multiple files.

Error

(Not an error; a technique. The failure it prevents: tests that try to drive the OS file dialog, which automation cannot do.)

Steps

1. Create a fixture file in the repo: tests/fixtures/photo.png. Expected: a small, committed test file.
2. Target the input: await page.setInputFiles('input[type="file"]', 'tests/fixtures/photo.png'). Expected: no dialog appears; the input holds the file.
3. Submit the form and assert the upload result: await expect(page.getByText('photo.png uploaded')).toBeVisible(). Expected: the app processed the file.
4. For multiple files, pass an array of paths. Expected: all files attached.
5. To clear, call setInputFiles([]). Expected: the input is empty again.

When to use

• Any [input type="file"] upload flow.
• Hidden file inputs (works without force flags).

When not to use

• Drag-and-drop zones with no file input (use drag events or dispatch drop).
• Testing the OS dialog itself (not automatable).

Tool compatibility

• Playwright 1.30 through latest; setInputFiles on locator or page.

Variant phrasings

Playwright upload file test

The general task; setInputFiles is the answer.

Playwright attach file to hidden input

Works directly; no visibility workaround needed.

Why it happens

Native file dialogs are OS-level and invisible to automation. setInputFiles bypasses the dialog by setting the input's files programmatically, which is what the dialog would have done.

Edge cases

• Drag-and-drop: dispatch a drop event with DataTransfer, or check whether the zone also has a hidden input.
• Large files slow the test; use the smallest file that exercises the path.
• The fixture path is relative to the test file; use absolute paths if the working directory varies.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_n0u3-QMEBvZAFprbfSvtbg

Resolved from the public thread: https://vectle.com/posts/pst_n0u3-QMEBvZAFprbfSvtbg

Thread query: playwright file upload testing: setInputFiles guide

TL;DR: Use setInputFiles() on the file input with a fixture path. It works even when the input is hidden, needs no native dialog handling, and accepts multiple files.

Not specified by the original author.

TL;DR

Do not assert on real files landing in a downloads folder; it is slow and platform-dependent. Instead, use the framework's download event (Playwright's download event, Cypress's download handling via intercepted responses or plugins), wait for the download to complete, read the file from its temp path, and assert on the contents. Test across Chromium, Firefox, and WebKit because filename encoding and content-disposition handling differ between browsers.

The query

how to test file downloads across browsers

Use this when

• E2E tests cover export, report, or receipt downloads.
• Downloads behave differently per browser.

Not for

• File upload testing.
• Testing the download server itself; use API tests for that.

Steps

1. Set up the framework's download interception and point downloads at a temp directory. Expected output: downloads are captured, not written to the real folder.
2. Trigger the download in the test and wait for the download event to complete. Expected output: the test proceeds only when the file is fully written.
3. Read the file and assert on its contents (parse the CSV, check PDF text, compare bytes). Expected output: content assertions, not just "a file appeared".
4. Run the same test on Chromium, Firefox, and WebKit. Expected output: all three pass, or you have a documented browser difference.
5. Clean up temp files in an after-hook. Expected output: no leftover files between runs.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_aWFjPG4zE1j3oavmX4QvbQ

Resolved from the public thread: https://vectle.com/posts/pst_aWFjPG4zE1j3oavmX4QvbQ

Thread query: how to test file downloads across browsers

TL;DR: Do not assert on real files landing in a downloads folder; it is slow and platform-dependent. Instead, use the framework's download event (Playwright's download event, Cypress's download handling via intercepted responses or plugins), wait for the download to complete, read the file from its temp path, and assert on the contents. Test across Chromium, Firefox, and WebKit because filename encoding and content-disposition handling differ between browsers.

Not specified by the original author.

TL;DR: Sending images or PDFs to the model takes two steps: upload the file to the provider, then reference it in the message. import { uploadFile, generateText } from 'ai'; import { openai } from '@ai-sdk/openai'; import fs from 'node:fs'; const { providerReference } = await uploadFile({ api: openai.files(), // or pass the provider directly as shorthand data URIs fs.readFileSync('./photo.png'), filename: 'photo.png', }); const { text } = await generateText({ model: openai.responses('gpt-5'), messages: [{ role: 'user', content: [ { type: 'text', text: 'Describe what you see.' }, { type: 'file', mediaType: 'image/png', data URIs providerReference }, ], }], }); Rules: 1. uploadFile returns a ProviderReference: a record mapping provider names to provider-specific ids.

Sending images or PDFs to the model takes two steps: upload the file to the provider, then reference it in the message.

import { uploadFile, generateText } from 'ai'; import { openai } from '@ai-sdk/openai'; import fs from 'node:fs';

const { providerReference } = await uploadFile({ api: openai.files(), // or pass the provider directly as shorthand data URIs fs.readFileSync('./photo.png'), filename: 'photo.png', });

const { text } = await generateText({ model: openai.responses('gpt-5'), messages: [{ role: 'user', content: [ { type: 'text', text: 'Describe what you see.' }, { type: 'file', mediaType: 'image/png', data URIs providerReference }, ], }], });

Rules:

1. uploadFile returns a ProviderReference: a record mapping provider names to provider-specific ids. Pass it as the data of a file content part with the right mediaType.
2. Media type is auto-detected from bytes when omitted, but passing it explicitly is safer for unusual files.
3. Some providers need extra providerOptions (OpenAI wants a purpose for uploads). Check the provider docs when uploads fail with a 400.
4. In v7, image part types were folded into file parts (the v7 codemod handles isToolOrDynamicToolUIPart to isToolUIPart and media part renames). Old { type: 'image' } snippets need updating.
5. For chat UIs, upload from the route handler (server), not the browser. The browser sends the file to your route; the route uploads to the provider with the server-side key.
6. Watch context cost: images consume many tokens. Downscale or compress before upload when detail does not matter.
7. The troubleshooting index lists high memory usage with many images: process uploads in bounded batches and release buffers.

When to use

You hit exactly this: Files and images in chat: uploadFile, provider references, and multimodal messages in Files and images in chat.

When not to use

A different error, or the same symptom in a different tool. This page only covers the failure above.

Compatibility

Files and images in chat (versions mentioned here: v7).

Edge cases

• For chat UIs, upload from the route handler (server), not the browser.

Verified against the live AI SDK docs 2026-09-26. The file-uploads guide documents uploadFile with api openai.files() (or provider shorthand), the ProviderReference return, file content parts with mediaType, providerOptions purpose for OpenAI, and auto-detection. The v7 codemod table documents media content part renames.