webui-attachment-upload

To send multimodal attachments from a WebUI to Claude Code CLI, encode images and files as base64 and deliver them over WebSocket. The backend then decodes the base64 payload, stores files on disk, and formats the content into Claude stdin JSON for multimodal processing.

WebUI attachment upload supports drag-and-drop, paste image, and file input features. The frontend provides real-time previews and size validation, ensuring selected images and files are transmitted seamlessly alongside the user prompt via WebSocket.

WebSocket base64 transfer for chat interface file uploads works by encoding browser-selected images and files as base64 strings. The Go backend receives these WebSocket payloads, decodes the base64 data for on-disk storage, and formats the attachments into multimodal content blocks for the CLI.

The best way to format Claude stdin JSON for attachment-rich messages is to structure the decoded base64 attachments as multimodal content blocks. The backend handles this formatting, ensuring both simple text and attachment-rich messages are properly structured for the Claude Code CLI to process.

You can use WebSocket attachment transfer for developer dashboards that require image and file uploads. The system satisfies frontend and backend validation, applies on-disk storage for attachments, and ensures files accompany user prompts in end-to-end workflows.