feat: Add clipboard paste and drag-and-drop file support#5820
Open
garypretty wants to merge 9 commits into
Open
feat: Add clipboard paste and drag-and-drop file support#5820garypretty wants to merge 9 commits into
garypretty wants to merge 9 commits into
Conversation
Add paste and drag-and-drop support for file attachments in the send box, consistent across both basic and fluent themes. Users can now paste files from the clipboard or drag files onto the chat to attach them. - Basic theme: Add onPaste handler, DropZone component, and handleAddFiles helper - Fluent theme: Add onPaste handler (drag-and-drop already existed) - All file types supported, respects disableFileUpload style option Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
garypretty
requested review from
a-b-r-o-w-n,
compulim,
cwhitten,
srinaath and
tdurnford
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds additional file-ingestion paths to the send box so users can attach files via clipboard paste (basic + fluent themes) and drag-and-drop (basic theme via a new DropZone component), aligning these interactions with existing attachment workflows and respecting the disableFileUpload style option.
Changes:
- Add
onPastehandling to capture clipboard file attachments in both basic and fluent send boxes. - Introduce a new
DropZonecomponent for the basic theme to enable drag-and-drop attachments. - Add basic-theme attachment construction (
useMakeThumbnail+useSendBoxAttachments) for dropped/pasted files.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/fluent-theme/src/components/sendBox/SendBox.tsx | Adds onPaste handler to attach clipboard files in the fluent send box. |
| packages/component/src/SendBox/DropZone.tsx | New basic-theme drop zone overlay component for drag-and-drop file attachments. |
| packages/component/src/SendBox/BasicSendBox.tsx | Adds paste handling, wires in DropZone, and adds helper to add dropped/pasted files to send box attachments. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Gate paste and drop on uiState === 'disabled' in both themes - Respect sendAttachmentOn: 'attach' in basic theme handleAddFiles - Hide DropZone when UI is disabled Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
- Add pasteFile.html: tests pasting files into send box, verifies attachment bar shows items and multiple pastes accumulate - Add dragAndDrop.upload.html: tests drag-and-drop flow in basic theme, verifies drop zone appears, files are attached on drop - Add sendBoxDropZone test ID to basic theme DropZone component Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New tests cannot include baseline snapshot images without running in the CI Docker environment. Use assertion-only checks instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Baseline snapshot images need to be generated in the CI Docker environment. The tests will fail until baselines are committed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Generate baseline snapshot images for both E2E tests using Docker Selenium environment - Fix pasteFile test to use text/plain files instead of fake image/png to avoid thumbnail decode errors in browser Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Author
|
Updated: baseline snapshot images have been generated using the Docker Selenium environment and are now committed. Both E2E tests (pasteFile.html and dragAndDrop.upload.html) pass locally against the baselines. |
Previous snapshots used wrong viewport (780x441) because they bypassed the jest-server which sets the window to 360x640. Now generated through the jest-server proxy matching CI configuration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changelog Entry
Description
Users currently have no way to paste files from the clipboard or drag-and-drop files onto the send box. The fluent theme has a DropZone for drag-and-drop but neither theme supports paste. This PR adds both capabilities consistently across both themes, using the existing attachment pipeline (
useSendBoxAttachments,useMakeThumbnail).Design
onPastehandler on the send box container div extracts files fromClipboardEvent.clipboardData.filesand feeds them intohandleAddFiles, which generates thumbnails and appends to the existing attachment list.DropZonecomponent adapted from the fluent theme's implementation, using emotion CSS-in-JS. Shows an overlay when files are dragged over the page.disableFileUploadanduiState === 'disabled'.sendAttachmentOn: 'attach'is honored (auto-submit after files added).Specific Changes
packages/component/src/SendBox/BasicSendBox.tsx— addedonPastehandler,DropZone,handleAddFileshelper, disabled state gatingpackages/component/src/SendBox/DropZone.tsx— new drop zone overlay component for basic themepackages/component/src/testIds.ts— addedsendBoxDropZonetest IDpackages/fluent-theme/src/components/sendBox/SendBox.tsx— addedonPastehandler using existinghandleAddFiles__tests__/html2/basic/pasteFile.html— E2E test for paste (single and multiple file accumulation)__tests__/html2/basic/dragAndDrop.upload.html— E2E test for drag-and-drop in basic themeI have added tests and executed them locally
I have updated
CHANGELOG.mdI have updated documentation
Review Checklist
z-index)package.jsonandpackage-lock.jsonreviewed