feat: image paste (Ctrl+V) and drag-and-drop into terminal (#84)

* feat: add image paste and drag-and-drop support Clipboard paste (Ctrl+V) and drag-and-drop of image files into the terminal. Images are saved to {workdir}/.claude-images/ and the absolute path is inserted into the terminal input for Claude to read. - POST /api/sessions/:id/paste-image endpoint (hand-parsed multipart) - image-input.js mixin with paste trap technique (works on HTTP) - Ctrl+V intercepted at xterm keyboard level, routes through hidden contenteditable div to capture both image and text clipboard data - Drag-and-drop on terminal container with visual overlay - Session cleanup deletes .claude-images/ on destroy Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * security: remove SVG from paste-image allowlist Drops .svg / image/svg+xml from the paste-image endpoint. SVGs are served as image/svg+xml via /api/sessions/:id/file-raw, same-origin, under a CSP that permits inline scripts — which would execute on view. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: arkon <arkon.85@hotmail.com>
2026-10-08 08:29:42 +02:00 · 2026-05-17 05:57:07 +02:00
parent 98966def03
commit 94bcf524a2
7 changed files with 293 additions and 2 deletions
@@ -5,7 +5,7 @@
 */

 import { FastifyInstance } from 'fastify';
-import { join, dirname } from 'node:path';
+import { join, dirname, extname } from 'node:path';
 import { homedir } from 'node:os';
 import { existsSync, statSync, mkdirSync, writeFileSync } from 'node:fs';
 import { execFile } from 'node:child_process';
@@ -1437,4 +1437,109 @@ export function registerSessionRoutes(

    return { sessions: results.slice(0, 50) };
  });
+
+  // ═══════════════════════════════════════════════════════════════
+  // Paste Image (clipboard / drag-drop upload)
+  // ═══════════════════════════════════════════════════════════════
+
+  const MAX_PASTE_IMAGE_SIZE = 10 * 1024 * 1024; // 10 MB
+  const ALLOWED_IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp']);
+
+  app.post('/api/sessions/:id/paste-image', async (req, reply) => {
+    const { id } = req.params as { id: string };
+    const session = findSessionOrFail(ctx, id);
+
+    const contentType = req.headers['content-type'] ?? '';
+    if (!contentType.includes('multipart/form-data')) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Expected multipart/form-data');
+    }
+
+    // Parse multipart boundary
+    const boundaryMatch = contentType.match(/boundary=(.+?)(?:;|$)/);
+    if (!boundaryMatch) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Missing boundary');
+    }
+
+    // Collect raw body with size limit
+    const chunks: Buffer[] = [];
+    let totalSize = 0;
+    for await (const chunk of req.raw) {
+      totalSize += chunk.length;
+      if (totalSize > MAX_PASTE_IMAGE_SIZE) {
+        reply.code(413);
+        return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'File too large (max 10MB)');
+      }
+      chunks.push(chunk as Buffer);
+    }
+    const body = Buffer.concat(chunks);
+
+    // Extract image from multipart body
+    const boundary = '--' + boundaryMatch[1];
+    const boundaryBuf = Buffer.from(boundary);
+    const parts: { headers: string; data: Buffer }[] = [];
+    let pos = 0;
+
+    while (pos < body.length) {
+      const start = body.indexOf(boundaryBuf, pos);
+      if (start === -1) break;
+      const afterBoundary = start + boundaryBuf.length;
+      if (body[afterBoundary] === 0x2d && body[afterBoundary + 1] === 0x2d) break;
+      const headerStart = afterBoundary + 2;
+      const headerEnd = body.indexOf(Buffer.from('\r\n\r\n'), headerStart);
+      if (headerEnd === -1) break;
+      const headers = body.subarray(headerStart, headerEnd).toString();
+      const dataStart = headerEnd + 4;
+      const nextBoundary = body.indexOf(boundaryBuf, dataStart);
+      const dataEnd = nextBoundary === -1 ? body.length : nextBoundary - 2;
+      parts.push({ headers, data: body.subarray(dataStart, dataEnd) });
+      pos = nextBoundary === -1 ? body.length : nextBoundary;
+    }
+
+    const imagePart = parts.find((p) => p.headers.includes('name="image"'));
+    if (!imagePart || imagePart.data.length === 0) {
+      reply.code(400);
+      return createErrorResponse(ApiErrorCode.INVALID_INPUT, 'No image uploaded');
+    }
+
+    // Determine extension from filename or Content-Type
+    let ext = '.png';
+    const filenameMatch = imagePart.headers.match(/filename="(.+?)"/);
+    if (filenameMatch) {
+      const origExt = extname(filenameMatch[1]).toLowerCase();
+      if (ALLOWED_IMAGE_EXTS.has(origExt)) ext = origExt;
+    }
+    const ctMatch = imagePart.headers.match(/Content-Type:\s*image\/(png|jpeg|jpg|webp|gif|bmp)/i);
+    if (ctMatch) {
+      const map: Record<string, string> = {
+        png: '.png',
+        jpeg: '.jpg',
+        jpg: '.jpg',
+        webp: '.webp',
+        gif: '.gif',
+        bmp: '.bmp',
+      };
+      ext = map[ctMatch[1].toLowerCase()] ?? ext;
+    }
+
+    if (!ALLOWED_IMAGE_EXTS.has(ext)) {
+      reply.code(400);
+      return createErrorResponse(
+        ApiErrorCode.INVALID_INPUT,
+        `Unsupported image type: ${ext}. Allowed: ${[...ALLOWED_IMAGE_EXTS].join(', ')}`
+      );
+    }
+
+    // Save to {workingDir}/.claude-images/
+    const imageDir = join(session.workingDir, '.claude-images');
+    if (!existsSync(imageDir)) {
+      mkdirSync(imageDir, { recursive: true });
+    }
+    const filename = `paste-${Date.now()}${ext}`;
+    const filepath = join(imageDir, filename);
+    await fs.writeFile(filepath, imagePart.data);
+
+    return { success: true, path: filepath, filename };
+  });
 }