Issue Station
Sign In
Tools hereToolbox

openclaw - 💡(How to fix) Fix Control UI WebChat does not support image upload (drag & drop / paste) [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#53618•Fetched 2026-04-08 01:25:42
View on GitHub
Comments
0
Participants
1
Timeline
1
Reactions
0
Author
kinglinjing0999kinglinjing0999
Participants
kinglinjing0999kinglinjing0999
Timeline (top)
unsubscribed ×1
RAW_BUFFERClick to expand / collapse

Problem

The Control UI built-in WebChat (accessed at http://127.0.0.1:10000) does not support image upload. When a user drags and drops an image into the chat input area, the image silently disappears and is never sent. The DingTalk channel supports image upload correctly, confirming the backend protocol handles images — the issue is purely on the Control UI frontend side.

Expected Behavior

Users should be able to:

  • Drag and drop an image file directly into the WebChat input area
  • Paste an image from clipboard (Ctrl+V)
  • See a preview of the image before sending

The image should then be sent to the agent just like it works on DingTalk.

Environment

  • OpenClaw version: 2026.3.23-2
  • Platform: Windows (likely affects all platforms)
  • Channel: Control UI WebChat (internal)
  • Backend channel DingTalk: works correctly with images

Additional Context

The Gateway protocol already supports images via the chat.send RPC with ttachments and images fields. The issue is that the Control UI frontend (Angular/Lit-based web component) does not implement:

  1. Drag-and-drop file handling
  2. Clipboard paste handling for images
  3. Image preview before sending
  4. Proper encoding and transmission of image data to the Gateway

This is a basic UX feature that most users would expect to work out of the box.

extent analysis

Fix Plan

To fix the issue, we need to implement the following features in the Control UI frontend:

  • Drag-and-drop file handling
  • Clipboard paste handling for images
  • Image preview before sending
  • Proper encoding and transmission of image data to the Gateway

Here are the concrete steps:

  • Add an event listener to the chat input area to handle drag-and-drop events
  • Use the Clipboard API to handle clipboard paste events
  • Create a preview component to display the uploaded image
  • Use the FormData API to encode and transmit the image data to the Gateway

Example Code

// Drag-and-drop event listener
chatInputArea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

chatInputArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  handleImageUpload(files);
});

// Clipboard paste event listener
document.addEventListener('paste', (e) => {
  const clipboardData = e.clipboardData;
  const items = clipboardData.items;
  for (const item of items) {
    if (item.kind === 'file') {
      handleImageUpload([item.getAsFile()]);
    }
  }
});

// Handle image upload
function handleImageUpload(files) {
  const file = files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const imageData = reader.result;
    // Create a preview component to display the uploaded image
    const preview = document.createElement('img');
    preview.src = imageData;
    chatInputArea.appendChild(preview);
    // Encode and transmit the image data to the Gateway
    const formData = new FormData();
    formData.append('image', file);
    fetch('/chat/send', {
      method: 'POST',
      body: formData,
    });
  };
  reader.readAsDataURL(file);
}

Verification

To verify that the fix worked, test the following scenarios:

  • Drag-and-drop an image file into the chat input area
  • Paste an image from clipboard (Ctrl+V)
  • Verify that the image is displayed in the preview component
  • Verify that the image is sent to the agent successfully

Extra Tips

  • Make sure to handle errors and exceptions properly
  • Consider adding validation for file types and sizes
  • Use a library like dropzone to simplify the drag-and-drop functionality
  • Use a library like clipboard to simplify the clipboard paste functionality

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#conversation history#tool integration#LLM response#prompt template#agent execution

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING