openclaw - 💡(How to fix) Fix [Feature Request] Webchat supports image/attachment upload in UI [1 participants]

// Handle file uploads
const uploadButton = document.getElementById('upload-button');
const fileInput = document.getElementById('file-input');

uploadButton.addEventListener('click', () => {
  fileInput.click();
});

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  // Send the file to the server for processing
  uploadFile(file);
});

// Send the file to the server
function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
}

// Support drag and drop
const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  uploadFile(file);
});