← Back to PRs

#4327: Gateway Web Chat: add image/file upload (attach, drag-drop, paste)

by RogerHsu7 open 2026-01-30 02:48 View on GitHub →
docs
Summary • Adds attachment support in Gateway web Chat: attach button, drag & drop, and paste-from-clipboard for images. • Backend: multipart upload endpoint that stores files under the instance media dir and returns MEDIA:/ paths; message API extended to accept media[]. • Frontend: composer queue with file chips, upload progress; message renderer for thumbnails and file tiles. Motivation Users of the web console need to share screenshots/logs directly in the browser. Today there is no upload mechanism. Implementation (draft) • Backend • POST /api/media/upload (multipart, repeatable file field). Saves to ~/.clawdbot/media/inbound/<uuid>.<ext>, returns { files: [{ path: 'MEDIA:/...', mime, name, size }] }. • Extend message creation to accept media[] in addition to text. • Frontend • Attach button + hidden input[type=file] multiple. • Drag & drop overlay and handlers on composer. • Paste handler captures image blobs from clipboard. • Attachment queue with progress; after upload, send text + media paths. • Message renderer displays thumbnails for images and links for other files. Config & Limits • Defaults: 25MB per file; up to 5 files per message. Configurable via gateway config. Security • Sanitized filenames; type/size validation; stored under instance media path; served via existing media route (auth/signed URLs as applicable). Acceptance Criteria • Drag/paste/attach works; messages show thumbnails or file tiles; assistant receives MEDIA:/path. Notes This PR ships as a draft to align on API shape and UI placement. Happy to adjust to the codebase conventions and routing. <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adds a draft implementation of media upload and rendering for the Gateway web chat: a backend multipart upload route returning `MEDIA:`-prefixed paths, a chat composer attachment UI (attach button, drag/drop, paste) that uploads queued files, and a message renderer that shows thumbnails/links for attached media. The changes live under `drafts/webchat-upload/*` plus accompanying proposal/docs. The overall direction matches existing repo conventions around `MEDIA:` tokens, but there are a few integration-critical mismatches (notably the shape/value of the `MEDIA:` token and the Fastify multipart registration) that will prevent the draft code from working correctly when wired into the real gateway. <h3>Confidence Score: 2/5</h3> - This PR is not safe to merge as-is due to runtime/integration-breaking issues in the draft implementation. - There are a couple of P0 issues that will break functionality when wired up: Fastify multipart is registered incorrectly (dynamic import Promise), and the backend/frontend disagree with existing `MEDIA:` token conventions (backend returns `MEDIA:${absolutePath}` and frontend does brittle string replacement). There are also correctness issues in the composer send flow (media derived from stale state) plus resource-management concerns (undrained multipart streams, object URL leaks). - drafts/webchat-upload/backend/mediaUpload.ts, drafts/webchat-upload/frontend/ChatComposerAttachment.tsx, drafts/webchat-upload/frontend/MessageMedia.tsx <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> **Context used:** - Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8)) <!-- /greptile_comment -->

Most Similar PRs