Skip to content

Feature: Drag and drop file upload support in chat input #216

@AlanAAG

Description

@AlanAAG

Summary

The chat interface currently supports file attachments only via an explicit file picker button. Drag-and-drop file upload directly onto the chat input area (or anywhere in the chat panel) is not yet implemented. This is a standard UX pattern expected in modern chat interfaces.

Current Behavior

  • Users must click the attachment icon to open the OS file picker
  • Dragging a file from the desktop or file manager onto the chat produces no action
  • No visual drop-zone indicator is shown when hovering with a file

Desired Behavior

  1. Drag a file over the chat panel → a visible drop-zone overlay appears (e.g. dashed border, "Drop file here" label)
  2. Drop the file → it is added to the pending attachments list, identical to using the file picker
  3. Multiple files → each file is added as a separate attachment
  4. Drag a file over the message input box specifically → same behavior, with the drop zone scoped to the input area
  5. Drag cancel (escape or drag out) → drop-zone overlay disappears cleanly
  6. Unsupported drag types (e.g. dragging text from another tab) → no drop zone shown, normal browser behavior preserved

Technical Context

The chat attachment upload flow goes through chat_attachment_upload WS message type in browser_adapter.py_handle_chat_attachment_upload. The frontend only needs to hook into the native dragenter, dragover, dragleave, and drop events on the chat container and pipe the resulting File objects through the same attachment upload path already used by the file picker.

Backend changes should not be required — only the React frontend needs updating.

Acceptance Criteria

  • Drag-over the chat panel shows a visual drop-zone indicator
  • Drop correctly uploads the file and adds it as a pending attachment
  • Drag-out / Escape dismisses the overlay without side effects
  • Works for all file types already supported by the attachment picker
  • Accessible: keyboard-only users are not negatively impacted (existing picker still works)
  • No regression to existing click-to-attach flow

Labels: enhancement, chat, file-upload, frontend, ux

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions