Problem

When using WebReel for browser automation that involves file uploads (e.g., uploading documents to web applications), there is no built-in upload action available. Users need to handle file uploads programmatically, which requires workarounds outside the standard action set.

Proposed Solution

Add an upload action type that:

Accepts a file path and a target selector (file input element)
Uses Playwright's setInputFiles() under the hood
Handles both visible file inputs and hidden inputs triggered by buttons

Example Usage

{
  "action": "upload",
  "selector": "input[type='file']",
  "filePath": "/path/to/document.pdf"
}

Context

This came up while using WebReel for QA automation of a document processing application where file uploads are a core workflow.

Activity

m13v8mo ago

We implemented file upload handling in our browser automation setup. A few things to watch for:

Playwright's setInputFiles() handles the simple case well, but there are edge cases:

Hidden file inputs: Many modern UIs hide the actual <input type='file'> and trigger it via a button click. You need to handle both patterns:

// Pattern 1: Direct file input
await page.setInputFiles('input[type="file"]', filePath);

// Pattern 2: Hidden input triggered by button
const [fileChooser] = await Promise.all([
  page.waitForEvent('filechooser'),
  page.click('button.upload-btn'),
]);
await fileChooser.setFiles(filePath);

Drag-and-drop uploads: Some apps only accept files via drag-and-drop zones. Playwright's dispatchEvent can simulate this but it's fragile. Better to find the underlying file input if one exists.
Multiple files: setInputFiles accepts an array, but some UIs expect sequential uploads with progress indicators between each.
File type validation: Some inputs have accept attributes that filter file types. Your upload action should validate the file extension matches before attempting the upload to give a better error message.

For the action schema, I'd suggest something like:

{ action: 'upload', selector: 'input[type=file]', file: '/path/to/file' }

With an optional triggerSelector for the button-click pattern.

m13v8mo ago

Here's how we handle file upload and other browser actions in our automation setup: https://github.com/m13v/browser-lock/blob/main/playwright-lock.sh

And our desktop-level element interaction framework (Playwright-style API for native apps): https://github.com/mediar-ai/terminator/blob/main/crates/terminator/src/element.rs

m13v7mo ago

Good feature request. We handle file uploads in our browser automation stack and there are a few edge cases worth flagging for the implementation.

The hidden file input pattern (where a visible button triggers a hidden input[type=file]) is super common. Playwright's setInputFiles works great for the simple case, but some apps use drag-and-drop upload zones with no file input at all. For those, you need to dispatch dragenter/dragover/drop events with a DataTransfer object containing the file. Might be worth having the upload action detect which pattern the target uses and handle both.

Another gotcha: some file inputs have accept attributes that restrict file types, and setInputFiles silently succeeds even when the file type doesn't match. The upload might look successful in the action log but the app's validation rejects it later. Adding a pre-check that validates the file extension against the accept attribute would save debugging time.

For multi-file uploads, the action schema could support an array of file paths too, since setInputFiles handles that natively.

m13v7mo ago

we handle file uploads and other browser interactions in our desktop automation framework's MCP server if you want to see the pattern: https://github.com/mediar-ai/terminator/blob/main/crates/terminator-mcp-agent/src/server.rs