Skip to main content

Support clipboard paste and drag-and-drop image upload in chat input (Web SDK / UI Kit)

Description:

Currently, users cannot upload images by copying and pasting them into the chat input or by dragging and dropping them into the chat area. Both actions are unresponsive and do not trigger an upload or preview.

We would like to enhance the chat experience by supporting:

  1. Copy-Paste Image Upload:
    Users should be able to copy an image (for example, from a screenshot, browser, or another app) and paste it directly into the chat input. The pasted image should be automatically uploaded and previewed before sending.

  2. Drag-and-Drop Image Upload:
    Users should be able to drag and drop an image file into the chat window. The dropped image should trigger the same upload flow and preview as selecting a file manually.

Expected Behavior:

  • Pasting or dragging an image into the chat area should automatically upload and show a preview.

  • The process should behave consistently with the existing file upload flow in the chat input.

Impact / Justification:

This enhancement improves overall user experience by enabling quick sharing of screenshots and images, a standard expectation across modern chat platforms.

Status: Completed1 comment

Log in to comment and vote

Comments1

  • Ketan changed status to Completed
    TeamPinned

    This feature is now live. Users can drag and drop supported media files directly into the chat area for quick and convenient sharing.

    You can find the implementation details here:

    https://www.cometchat.com/docs/ui-kit/react/core-features#media-sharing

    Thanks for the feedback and for helping us improve CometChat.