Feature: drag images into conversation input (prevent VS Code opening file)

[evantilu]

Feature request: Allow dragging images into the Claude panel input (prevent VS Code opening files)

Problem

• When dragging an image file from the OS into the Claude extension window in VS Code, the editor opens the image as a file instead of inserting/attaching it into the Claude conversation input. This makes drag-to-conversation unusable.

Expected behavior

• Dropping an image onto the conversation input (or conversation area) should attach or paste the image into the Claude session input rather than opening it as an editor tab.

Why this happens

• VS Code's default behavior is to open dropped files in the editor. To change this for an extension, the extension UI needs to capture drag/drop events (webview or custom UI) and call event.preventDefault() so the host does not open the file.

Suggested fix / implementation notes

• If the extension uses a Webview for the conversation UI, add document-level dragover + drop handlers in the webview and call event.preventDefault() in those handlers. Read dropped files via the File API and post them to the extension host with vscode.postMessage.
• If the extension uses QuickInput/InputBox, note that they don't support file drop handlers — a webview-based input is required to intercept file drops.

Minimal webview snippet (client side)

const vscode = acquireVsCodeApi();

document.addEventListener('dragover', e => e.preventDefault());

document.addEventListener('drop', e => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer?.files || []);
  files.forEach(file => {
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result; // data:image/png;base64,...
      const [, base64] = dataUrl.split(',');
      vscode.postMessage({ type: 'imageDrop', name: file.name, mime: file.type, data: base64 });
    };
    reader.readAsDataURL(file);
  });
});

Minimal host-side handling (extension host)

panel.webview.onDidReceiveMessage(async (msg) => {
  if (msg.type === 'imageDrop') {
    const buf = Buffer.from(msg.data, 'base64');
    // save to disk or upload to the backend and attach to the conversation input
  }
});

Notes / caveats

• Large files should be streamed or uploaded rather than sent as inline base64 messages to avoid memory pressure.
• If you prefer, the extension can instead detect a file drop and open a native OS file picker to let the user confirm/upload.

Request

• Please add drag-and-drop handling on the conversation input (or add an "Attach image" control) so images can be dropped into the Claude session instead of opening in the editor.

Thanks!