#4327: Gateway Web Chat: add image/file upload (attach, drag-drop, paste)
docs
Cluster:
Web UI Enhancements and Fixes
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
#10441: webchat: switch file uploads to HTTP /uploads
by supernewbilityxht1 · 2026-02-06
85.0%
#6663: Web UI: handle drag-drop image attachments
by mar0der · 2026-02-01
79.3%
#22113: feat: support non-image file attachments in webchat chat.send
by Kt-L · 2026-02-20
78.7%
#22781: fix(webchat): persist chat attachments after guards and expose medi...
by Kansodata · 2026-02-21
78.2%
#20913: fix: intercept Discord embed images to enforce mediaMaxMb
by MumuTW · 2026-02-19
74.8%
#8284: Fix: Webchat images now persist after sending
by vishaltandale00 · 2026-02-03
73.8%
#8042: feat(telegram): add media index for reply-to media lookup
by batumilove · 2026-02-03
73.5%
#13961: fix(telegram): support media attachments in replied Telegram messages
by shan-mx · 2026-02-11
73.1%
#17842: Fix Google Chat media upload failure by inferring content-type from...
by Clawborn · 2026-02-16
73.0%
#10902: fix(msteams): fix inline pasted image downloads
by jlian · 2026-02-07
72.9%