openclaw - 💡(How to fix) Fix Bug: Image upload in Control UI webchat not working [5 comments, 6 participants]

Images should be uploaded and sent to the agent along with the message, or at least show an error if upload fails.

Fix Plan

The fix involves updating the image upload handling in the Control UI to properly send the image files to the agent.

Steps to Fix

• Update the uploadImage function in the Control UI code to include the image file in the message payload:

// Before
function uploadImage(file) {
  // ...
  sendMessage({ text: '' });
}

// After
function uploadImage(file) {
  const formData = new FormData();
  formData.append('file', file);
  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
  .then((response) => response.json())
  .then((data) => {
    sendMessage({ text: '', attachments: [data.fileId] });
  })
  .catch((error) => console.error('Error uploading image:', error));
}

• Ensure the /upload endpoint is properly configured to handle multipart/form-data requests and returns the uploaded file ID:

# Example using Flask
from flask import request, jsonify

@app.route('/upload', methods=['POST'])
def upload_file():
    file = request.files['file']
    file_id = upload_file_to_storage(file)
    return jsonify({'fileId': file_id})

• Verify that the upload_file_to_storage function is implemented and working correctly to store the uploaded file and return its ID.

Verification

• Test the image upload feature in the Control UI by following the steps to reproduce.
• Verify that the image is sent to the agent and displayed correctly.
• Check the browser console for any error messages related to the image upload.