feat: Send multiple files into a single message by abhipatel0211 · Pull Request #32703 · RocketChat/Rocket.Chat

abhipatel0211 · 2024-06-29T14:35:06Z

Proposed changes (including videos or screenshots)

This PR aims to introduce the ability to send multiple files into a single message. In order to keep the compatibility with old integrations we're introducing a new setting, in order to use it you'll need to enabled it first otherwise it will send one file per message

Note

It's not available for livechat rooms yet

Closes #35651
Closes #24776
Closes #25918
Closes RocketChat/feature-requests#31

Steps to test or reproduce

Enable the setting FileUpload_EnableMultipleFilesPerMessage
Go to a room.
Upload multiple files.
Check the files attached in the composer.
Send the message and see the files rendered in a single message

Further comments

This implementation is an initial version of the multiple file sharing feature. While it is functional, some minor bugs remain, particularly with image file sharing, which will be addressed in future updates.

CORE-847

This pull request introduces the ability to send multiple files in a single message within the Rocket.Chat application. Key changes include:

File Upload Enhancements: The file upload functionality has been significantly refactored to support multiple files, including updates to the UploadsAPI interface with new methods for managing uploads and handling encrypted content. The Upload type definition now includes both file and URL properties.
New Components and Hooks: Several new components and hooks have been added to manage file uploads, such as MessageComposerFile, MessageComposerFileArea, and MessageComposerFileLoader, which provide UI elements for file management, preview, and error handling. The useFileUploadDropTarget hook has been introduced to streamline file upload handling.
Thread and Message Integration: The PR adds support for thread-specific uploads and integrates file upload capabilities into various components like MessageBox, AudioMessageRecorder, and VideoMessageRecorder. The confirmFiles function is introduced to handle file confirmation and sending, with error handling and cleanup processes.
Localization and API Updates: The English localization file has been updated with new messages related to upload failures and file count limitations. A new API endpoint for media editing has been added to the REST typings.

Overall, this pull request enhances the file upload experience by allowing multiple files to be sent in a single message, improving the user interface, and refining the underlying upload logic.

Summary by CodeRabbit

New Features
- Upload and send multiple files in a single message (configurable, max 10)
- Inline composer file attachments with per-file rename before sending
- Warning modal to "send anyway" when some uploads fail
Improvements
- Better end-to-end encrypted file upload handling
- Streamlined UX: drag-and-drop drop-target uploads and inline file list (thread-aware)
- New server setting to enable/disable multi-file-per-message

changeset-bot · 2024-06-29T14:35:09Z

🦋 Changeset detected

Latest commit: cb9ebf9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 41 packages

Name	Type
@rocket.chat/model-typings	Minor
@rocket.chat/core-typings	Minor
@rocket.chat/models	Minor
@rocket.chat/i18n	Minor
@rocket.chat/meteor	Minor
@rocket.chat/apps	Patch
@rocket.chat/account-service	Patch
@rocket.chat/authorization-service	Patch
@rocket.chat/ddp-streamer	Patch
@rocket.chat/omnichannel-transcript	Patch
@rocket.chat/presence-service	Patch
@rocket.chat/queue-worker	Patch
@rocket.chat/omnichannel-services	Patch
rocketchat-services	Patch
@rocket.chat/uikit-playground	Patch
@rocket.chat/api-client	Patch
@rocket.chat/core-services	Patch
@rocket.chat/cron	Patch
@rocket.chat/ddp-client	Patch
@rocket.chat/fuselage-ui-kit	Major
@rocket.chat/gazzodown	Major
@rocket.chat/http-router	Patch
@rocket.chat/livechat	Patch
@rocket.chat/rest-typings	Minor
@rocket.chat/ui-avatar	Major
@rocket.chat/ui-client	Major
@rocket.chat/ui-contexts	Major
@rocket.chat/ui-voip	Major
@rocket.chat/web-ui-registration	Major
@rocket.chat/abac	Patch
@rocket.chat/federation-matrix	Patch
@rocket.chat/license	Patch
@rocket.chat/media-calls	Patch
@rocket.chat/pdf-worker	Patch
@rocket.chat/presence	Patch
@rocket.chat/instance-status	Patch
@rocket.chat/omni-core	Patch
@rocket.chat/omni-core-ee	Patch
@rocket.chat/mock-providers	Patch
@rocket.chat/network-broker	Patch
@rocket.chat/ui-video-conf	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

apps/meteor/app/api/server/v1/rooms.ts

packages/rest-typings/src/v1/rooms.ts

ee/packages/api-client/src/index.ts

apps/meteor/client/providers/ImageGalleryProvider.tsx

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

…les_in_one_msg

apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx

apps/meteor/client/lib/chats/uploads.ts

apps/meteor/app/lib/server/methods/sendMessage.ts

apps/meteor/app/file-upload/server/methods/sendFileMessage.ts

…ages

…message clarity for file upload limits

…saging

…nd update usage in HomeContent class

…tent type validation

…ved accuracy

apps/meteor/client/lib/chats/flows/processMessageUploads.ts

nazabucciarelli · 2026-02-18T17:59:48Z

Testing locally I've noticed I'm able to upload multiple files even though FileUpload_EnableMultipleFilesPerMessage is false. Is this correct?

KevLehman · 2026-02-18T18:01:42Z

Testing locally I've noticed I'm able to upload multiple files even though FileUpload_EnableMultipleFilesPerMessage is false. Is this correct?

It depends, if the uploads are on the same message with the setting disabled, then we have a problem.

If the uploads are on multiple messges, then that should be the current behavior RC has for uploading (when you select/drop many files)

dougfabris · 2026-02-18T18:04:29Z

Testing locally I've noticed I'm able to upload multiple files even though FileUpload_EnableMultipleFilesPerMessage is false. Is this correct?

please check carefully if it was sent in a single or multiple messages, I'm positive that it's working fine

nazabucciarelli · 2026-02-18T18:35:07Z

Testing locally I've noticed I'm able to upload multiple files even though FileUpload_EnableMultipleFilesPerMessage is false. Is this correct?

please check carefully if it was sent in a single or multiple messages, I'm positive that it's working fine

Then it's ok 👍

ggazzo · 2026-02-26T21:49:36Z

apps/meteor/tests/end-to-end/api/moderation.ts

+			before(async () => {
+				const channelInfoResponse = await request.get(api('channels.info')).set(credentials).query({ roomName: 'general' }).expect(200);
+				generalRoomId = channelInfoResponse.body.channel._id;
+


Suggested change

generalRoomId = 'GENERAL';

ggazzo · 2026-02-26T21:57:35Z

apps/meteor/tests/end-to-end/api/moderation.ts

+				generalRoomId = channelInfoResponse.body.channel._id;
+
+				const file1Response = await request
+					.post(api(`rooms.media/${generalRoomId}`))


I could not find the 'chat.sendMessage' implementation or tests related

ggazzo · 2026-02-26T22:01:13Z

apps/meteor/tests/end-to-end/api/moderation.ts

+					.expect(200)
+					.expect((res: Response) => {
+						expect(res.body).to.have.property('success', true);
+					});


Suggested change

.expect(200)

.expect((res: Response) => {

expect(res.body).to.have.property('success', true);

});

.expect(200);

ggazzo · 2026-02-26T22:04:27Z

apps/meteor/tests/end-to-end/api/moderation.ts

+				const data = JSON.parse(sendMessageResponse.body.message);
+				messageWithFiles = data.result;


Suggested change

const data = JSON.parse(sendMessageResponse.body.message);

messageWithFiles = data.result;

messageWithFiles = JSON.parse(sendMessageResponse.body.message).result;

ggazzo · 2026-02-26T22:23:45Z

apps/meteor/client/views/room/composer/ComposerMessage.tsx

 						tshow,
 						previewUrls,
 						isSlashCommandAllowed,
+						tmid,


there is no reason to pass tmid here chat/this contains tmid

ggazzo · 2026-02-26T22:25:11Z

apps/meteor/client/views/room/composer/messageBox/MessageComposerFileLoader.tsx

+	const customCSS = css`
+		animation: spin-animation 0.8s linear infinite;
+
+		@keyframes spin-animation {
+			from {
+				transform: rotate(0deg);
+			}
+
+			to {
+				transform: rotate(360deg);
+			}
+		}
+	`;


this can be defined outside the MessageComposerFileLoader component

abhipatel0211 requested review from a team as code owners June 29, 2024 14:35

rodrigok marked this pull request as draft July 5, 2024 17:21

rodrigok requested changes Jul 5, 2024

View reviewed changes

apps/meteor/app/api/server/v1/rooms.ts Outdated Show resolved Hide resolved

apps/meteor/app/api/server/v1/rooms.ts Outdated Show resolved Hide resolved

rodrigok requested changes Aug 5, 2024

View reviewed changes

abhipatel0211 added 12 commits August 7, 2024 00:42

merge develop

5a9f646

feat: Added a file upload preview inside the messageBox

771314e

Fix issue in uploads.ts causing duplicate messages on send

755c08b

Cleanup: Remove unnecessary code

f2bd552

removed unused space

39ff2a3

fix: lint errors

23eb009

Merge remote-tracking branch 'upstream/develop' into feat/multiple_fi…

e786f70

…les_in_one_msg

fix: lint and TS errors

f4b60d5

fix: ensure file handling as array to resolve type errors in uploads

1c0ddde

fix: lint error and TS errors

f5213b0

fix: lint and TS errors

6f398b4

removed unused code

cdc0ff5

rodrigok requested changes Aug 8, 2024

View reviewed changes

rodrigok reviewed Aug 8, 2024

View reviewed changes

apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx Outdated Show resolved Hide resolved

rodrigok reviewed Aug 8, 2024

View reviewed changes

apps/meteor/client/lib/chats/uploads.ts Outdated Show resolved Hide resolved

rodrigok reviewed Aug 8, 2024

View reviewed changes

apps/meteor/app/lib/server/methods/sendMessage.ts Outdated Show resolved Hide resolved

fix: reorder imports to fix ESLint errors and removed unused changes

a1faa22

rodrigok requested changes Aug 8, 2024

View reviewed changes

apps/meteor/app/lib/server/methods/sendMessage.ts Outdated Show resolved Hide resolved

apps/meteor/app/lib/server/methods/sendMessage.ts Outdated Show resolved Hide resolved

apps/meteor/app/file-upload/server/methods/sendFileMessage.ts Outdated Show resolved Hide resolved

abhipatel0211 added 5 commits August 8, 2024 23:35

fix: changed the variable name with camelCase and removed unwanted ch…

326a197

…ages

fix: changed variable names to cameCase

c078083

fix: added toast message while uploading file

0e4d827

Added the files to upload in the sendMessage in the executeSendMessage

60a80f9

fix: Revert back as using message API

7ac5841

dougfabris and others added 13 commits February 13, 2026 13:39

fix: ensure file upload description is sent with encrypted messages

128bb15

fix: update file name reference in E2EE file attachment test

5b860e2

fix: correct spelling of "cancelled" to "canceled" and improve error …

8359678

…message clarity for file upload limits

Merge branch 'develop' into feat/multiple_files_in_one_msg

fbc9888

fix e2ee attachment references

7405f75

Merge branch 'develop' into feat/multiple_files_in_one_msg

fa3bfd0

fix: handle error case for file upload response and improve error mes…

6bf27c8

…saging

refactor: rename waitForMediaResponse to createMediaResponsePromise a…

5f1fbf7

…nd update usage in HomeContent class

fix: streamline E2E file upload checks by combining conditions

0022943

fix: enhance file upload handling for encrypted files and improve con…

66aacbd

…tent type validation

fix: enhance handling of encrypted uploads in message sending process

33defd1

fix: update file sending and deletion checks in files management tests

ba854f0

fix: update file deletion and upload handling in E2EE tests for impro…

50bdc45

…ved accuracy

ricardogarim requested changes Feb 18, 2026

View reviewed changes

apps/meteor/client/lib/chats/flows/processMessageUploads.ts Outdated Show resolved Hide resolved

ricardogarim mentioned this pull request Feb 18, 2026

refactor: use options object in sendMessage function signature #38772

Merged

This was referenced Feb 18, 2026

fix: allow uploading multiple same-size files via drag-and-drop #38109

Closed

Drag-and-drop upload fails to upload multiple files with the same size #38108

Open

dougfabris added 2 commits February 18, 2026 19:47

Merge branch 'develop' into feat/multiple_files_in_one_msg

4a95578

fix: review

cb9ebf9

ricardogarim approved these changes Feb 19, 2026

View reviewed changes

ggazzo reviewed Feb 26, 2026

View reviewed changes

		const data = JSON.parse(sendMessageResponse.body.message);
		messageWithFiles = data.result;

	const data = JSON.parse(sendMessageResponse.body.message);
	messageWithFiles = data.result;
	messageWithFiles = JSON.parse(sendMessageResponse.body.message).result;

Conversation

abhipatel0211 commented Jun 29, 2024 • edited by dougfabris Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes (including videos or screenshots)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Jun 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nazabucciarelli commented Feb 18, 2026

Uh oh!

KevLehman commented Feb 18, 2026

Uh oh!

dougfabris commented Feb 18, 2026

Uh oh!

nazabucciarelli commented Feb 18, 2026

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

ggazzo Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

14 participants

abhipatel0211 commented Jun 29, 2024 •

edited by dougfabris

Loading

changeset-bot bot commented Jun 29, 2024 •

edited

Loading