fix: send messages with successfully uploaded attachments only #2704
Conversation
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
### 🎯 Goal Current `Channel.dragAndDropWindow` and `Channel.optionalMessageInputProps` architecture which used to allow drag&drop file upload by dropping files onto the message list (channel) component suffers from a few pain points: - duplicate `MessageInputContextProvider` initialization, see [here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/Channel/Channel.tsx#L1479-L1484), [here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/MessageInput/MessageInput.tsx#L137-L159) and [here](https://github.com/GetStream/stream-chat-react/blob/5fa6b0fc239a7d48032ae4c3d34e29969c52bd0c/src/components/MessageInput/DropzoneProvider.tsx#L47-L67) ([related issue](https://getstream.slack.com/archives/C02R5UCGN6N/p1740392263047589)) - broken styling ([v2 vendor folder](https://github.com/GetStream/stream-chat-css/tree/v5.8.0/src/v2/styles/vendor) is missing [react-file-utils styling](https://github.com/GetStream/stream-chat-css/blob/v5.8.0/src/vendor/react-file-utils.scss)) New solution allows dragging and uploading files both in "channel" and in thread individually - which was previously impossible. The new solution also reuses drag and drop styling which is used by default in `MessageInputFlat` component (some minor adjustments from integrators are needed - such as setting relative positioning on required parents). #### Old API: ```tsx <Channel dragAndDropWindow> <Window> <ChannelHeader /> <MessageList /> <AIStateIndicator /> <MessageInput focus /> </Window> <Thread virtualized /> </Channel> ``` #### New API: ```tsx <Channel> <WithDragAndDropUpload className='str-chat__main-panel'> <ChannelHeader/> <MessageList /> <AIStateIndicator /> <MessageInput focus /> </WithDragAndDropUpload> <WithDragAndDropUpload> <Thread virtualized /> </WithDragAndDropUpload> </Channel> ``` ### Deprecations #### Public - `Channel.dragAndDropWindow` prop (will remove in v13) - `Channel.optionalMessageInputProps` prop (will remove in v13) #### Private - `DropzoneProvider` - `DropzoneInner` - `ImageDropzone` Note: This is not a direct fix of the issue I mentioned above (Slack link), I believe the proper fix is to move away from this messy architecture (by removing deprecated components and options which we'll do in v13 once this PR is merged). THIS PR RELIES ON [CSS CHANGES](GetStream/stream-chat-css#329) ### 🎨 UI Changes Before:  After: 
### 🎯 Goal Yesterday evening I reconsidered how the wrapper should work - this way it's much more simpler and allows multiple `MessageInput` components to work under one wrapper without any clashing. Since the previous feature has not been released yet, we can change the context API without any worry and thus `refactor`.
## [12.15.0](v12.14.0...v12.15.0) (2025-05-02) ### Features * introduce WithDragAndDropUpload component ([#2688](#2688)) ([6b03abd](6b03abd)) ### Chores * **deps:** upgrade @stream-io/stream-chat-css to v5.8.1 ([#2689](#2689)) ([d0c32e3](d0c32e3)) ### Refactors * simplify WithDragAndDropUpload API ([#2691](#2691)) ([46c9add](46c9add))
(cherry picked from commit 88590f1)
MartinCupela
force-pushed
the
fix/send-message-with-uploaded-attachments-only
branch
from
cf457d4 to
742f8cd
Compare
oliverlaz
approved these changes
May 9, 2025
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## release-v12 #2704 +/- ##
==============================================
Coverage ? 81.01%
==============================================
Files ? 471
Lines ? 9986
Branches ? 2357
==============================================
Hits ? 8090
Misses ? 1773
Partials ? 123 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
github-actions bot
pushed a commit
that referenced
this pull request
May 9, 2025
## [12.15.1](v12.15.0...v12.15.1) (2025-05-09) ### Bug Fixes * send messages with successfully uploaded attachments only ([#2704](#2704)) ([8a66f6a](8a66f6a))
|
🎉 This PR is included in version 12.15.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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.
🎯 Goal
When link previews generation client-side was enabled, the failed upload attachments were also included in the sent message payload.