[Feature]: Support pasting one or multiple local files into web pages
- Dominant language
- JavaScript
- Stars
- 29.3k
- Forks
- 2.9k
- Avg merge
- 15h 36m
- Merged PRs (30d)
- 70
Description
### Feature Description
OpenCLI should support pasting local files into web pages, including both single-file and multi-file paste operations.
Many web applications accept files through clipboard paste events, not only through traditional upload controls or drag-and-drop areas. For example, users may paste images, documents, or other attachments directly into chat boxes, editors, ticket forms, upload widgets, or rich text inputs.
It would be useful if OpenCLI could expose a command/API that lets agents paste one or more local files into the currently focused page element, or into a specified target element.
### Use Case
```markdown
As an OpenCLI user / agent developer, I want to paste one or multiple local files into a web page so that browser automation can handle file attachment workflows that rely on clipboard paste.
Example scenarios:
- Pasting one or more images into a chat composer.
- Pasting screenshots into an issue tracker, support form, or rich text editor.
- Uploading attachments to websites that do not expose a reliable file input selector.
- Supporting web apps where the normal user workflow is "copy file/image → paste into editor".
- Allowing agents to attach multiple generated files without needing site-specific adapter logic for every upload widget.
This would make OpenCLI more capable for real-world browser automation, especially for websites where file upload behavior is implemented through clipboard events.
```
### Proposed Solution
Add a file paste capability to OpenCLI's browser operation layer.
Possible API shape:
```bash
opencli browser paste-files /path/to/file.png
opencli browser paste-files /path/to/a.png /path/to/b.pdf
```
Or, if exposed through the programmatic/browser command interface:
```ts
await browser.pasteFiles(['/path/to/file.png'])
await browser.pasteFiles(['/path/to/a.png', '/path/to/b.pdf'])
```
Expected behavior:
1. Resolve and validate the provided local file paths.
2. Infer MIME types where possible.
3. Create clipboard-compatible `File` / `DataTransfer` objects.
4. Dispatch a paste event to the currently focused element or a specified target element.
5. Support multiple files in a single paste event.
6. Return a clear error if the browser/runtime cannot emulate clipboard file paste for the current page.
It would also be helpful to support options such as:
- `--target ` or target id, if OpenCLI already has a target-element mechanism.
- `--focus` / auto-focus target before pasting.
- verbose diagnostics showing which files and MIME types were pasted.
### Alternatives Considered
Possible alternatives:
- Use native file upload through ``, but many sites hide inputs, dynamically create them, or only support paste/drop workflows.
- Use drag-and-drop emulation, but paste is a distinct UX path and some applications only listen for clipboard paste events.
- Implement site-specific adapters for each upload flow, but this does not scale well and makes generic browser automation harder.
- Inject custom JavaScript per site, but a built-in OpenCLI primitive would be more reliable and reusable.
Contributor guide
Research direction
Start in OpenCLI's browser operation layer and inspect the existing browser command and programmatic interfaces for file and target-element handling. Define the paste-files entry point around the stated behavior: validate local paths, support one or multiple files, dispatch a clipboard paste to the focused or specified element, and report unsupported runtime cases clearly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, playwright
- Domain
- cli, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100