feat: Send multiple files into a single message

.changeset/mighty-moose-return.md

@@ -0,0 +1,9 @@
+---
+'@rocket.chat/model-typings': minor
+'@rocket.chat/core-typings': minor
+'@rocket.chat/models': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Introduces the ability to upload multiple files and send it into a single message

apps/meteor/app/e2e/client/rocketchat.e2e.room.ts

@@ -1,5 +1,5 @@
 import { Base64 } from '@rocket.chat/base64';
-import type { IE2EEMessage, IMessage, IRoom, ISubscription, IUser, IUploadWithUser, AtLeast } from '@rocket.chat/core-typings';
+import type { IE2EEMessage, IMessage, IRoom, ISubscription, IUser, IUploadWithUser, AtLeast, IUpload } from '@rocket.chat/core-typings';
 import { Emitter } from '@rocket.chat/emitter';
 import type { Optional } from '@tanstack/react-query';
 import EJSON from 'ejson';
@@ -27,6 +27,7 @@ import {
 import { log, logError } from './logger';
 import { e2e } from './rocketchat.e2e';
 import { RoomManager } from '../../../client/lib/RoomManager';
+import type { EncryptedFile } from '../../../client/lib/chats/Upload';
 import { roomCoordinator } from '../../../client/lib/rooms/roomCoordinator';
 import { RoomSettingsEnum } from '../../../definition/IRoomTypeConfig';
 import { Rooms, Subscriptions, Messages } from '../../models/client';
@@ -187,7 +188,7 @@ export class E2ERoom extends Emitter {
 		this.setState(E2ERoomState.KEYS_RECEIVED);
 	}
 
-	async shouldConvertSentMessages(message: { msg: string }) {
+	async readyToEncrypt() {
 		if (!this.isReady() || this[PAUSED]) {
 			return false;
 		}
@@ -198,6 +199,14 @@ export class E2ERoom extends Emitter {
 			});
 		}
 
+		return true;
+	}
+
+	async shouldConvertSentMessages(message: { msg: string }) {
+		if (!(await this.readyToEncrypt())) {
+			return false;
+		}
+
 		if (message.msg[0] === '/') {
 			return false;
 		}
@@ -563,7 +572,7 @@ export class E2ERoom extends Emitter {
 	}
 
 	// Encrypts files before upload. I/O is in arraybuffers.
-	async encryptFile(file: File) {
+	async encryptFile(file: File): Promise<EncryptedFile | void> {
 		// if (!this.isSupportedRoomType(this.typeOfRoom)) {
 		// 	return;
 		// }
@@ -623,7 +632,7 @@ export class E2ERoom extends Emitter {
 
 	// Helper function for encryption of content
 	async encryptMessageContent(
-		contentToBeEncrypted: Pick<IMessage, 'attachments' | 'files' | 'file'> & Optional<Pick<IMessage, 'msg'>, 'msg'>,
+		contentToBeEncrypted: (Pick<IMessage, 'attachments' | 'files' | 'file'> & Optional<Pick<IMessage, 'msg'>, 'msg'>) | Partial<IUpload>,
 	) {
 		const data = new TextEncoder().encode(EJSON.stringify(contentToBeEncrypted));
 

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

@@ -6,9 +6,12 @@ import type {
 	AtLeast,
 	FilesAndAttachments,
 	IMessage,
+	FileProp,
 } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
+import { Logger } from '@rocket.chat/logger';
 import { Rooms, Uploads, Users } from '@rocket.chat/models';
+import { wrapExceptions } from '@rocket.chat/tools';
 import { Match, check } from 'meteor/check';
 import { Meteor } from 'meteor/meteor';
 
@@ -22,13 +25,36 @@ import { FileUpload } from '../lib/FileUpload';
 
 function validateFileRequiredFields(file: Partial<IUpload>): asserts file is AtLeast<IUpload, '_id' | 'name' | 'type' | 'size'> {
 	const requiredFields = ['_id', 'name', 'type', 'size'];
-	requiredFields.forEach((field) => {
+	for (const field of requiredFields) {
 		if (!Object.keys(file).includes(field)) {
 			throw new Meteor.Error('error-invalid-file', 'Invalid file');
 		}
-	});
+	}
 }
 
+const logger = new Logger('sendFileMessage');
+
+export const parseMultipleFilesIntoMessageAttachments = async (
+	filesToConfirm: Partial<IUpload>[],
+	roomId: string,
+	user: IUser,
+): Promise<{ files: FileProp[]; attachments: MessageAttachment[] }> => {
+	const results = await Promise.all(
+		filesToConfirm.map((file) =>
+			wrapExceptions(() => parseFileIntoMessageAttachments(file, roomId, user)).catch(async (error) => {
+				// Not an important error, it should not happen and if it happens wil affect the attachment preview in the message object only
+				logger.warn({ msg: 'Error processing file: ', file, error });
+				return { files: [], attachments: [] };
+			}),
+		),
+	);
+
+	return {
+		files: results.flatMap(({ files }) => files),
+		attachments: results.flatMap(({ attachments }) => attachments),
+	};
+};
+
 export const parseFileIntoMessageAttachments = async (
 	file: Partial<IUpload>,
 	roomId: string,

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

@@ -1,14 +1,15 @@
 import { Apps } from '@rocket.chat/apps';
 import { api, Message } from '@rocket.chat/core-services';
-import type { IMessage, IRoom } from '@rocket.chat/core-typings';
-import { Messages } from '@rocket.chat/models';
+import { isE2EEMessage, type IMessage, type IRoom, type IUpload, type IUploadToConfirm } from '@rocket.chat/core-typings';
+import { Messages, Uploads } from '@rocket.chat/models';
 import { Match, check } from 'meteor/check';
 
 import { parseUrlsInMessage } from './parseUrlsInMessage';
 import { isRelativeURL } from '../../../../lib/utils/isRelativeURL';
 import { isURL } from '../../../../lib/utils/isURL';
 import { hasPermissionAsync } from '../../../authorization/server/functions/hasPermission';
 import { FileUpload } from '../../../file-upload/server';
+import { parseMultipleFilesIntoMessageAttachments } from '../../../file-upload/server/methods/sendFileMessage';
 import { settings } from '../../../settings/server';
 import { afterSaveMessage } from '../lib/afterSaveMessage';
 import { notifyOnRoomChangedById, notifyOnMessageChange } from '../lib/notifyListener';
@@ -212,14 +213,56 @@ export function prepareMessageObject(
 	}
 }
 
+/**
+ * Update file names on the Uploads collection, as the names may have changed between the upload and the sending of the message
+ * For encrypted rooms, the full `content` of the file is updated as well, as the name is included there
+ **/
+const updateFileNames = async (filesToConfirm: IUploadToConfirm[], isE2E: boolean) => {
+	return Promise.all(
+		filesToConfirm.map(async (upload) => {
+			if (isE2E) {
+				// on encrypted files, the `upload.name` is an useless attribute, so it doesn't need to be updated
+				// the name will be loaded from the encrypted data on `upload.content` instead
+				if (upload.content) {
+					await Uploads.updateFileContentById(upload._id, upload.content);
+				}
+			} else if (upload.name) {
+				await Uploads.updateFileNameById(upload._id, upload.name);
+			}
+		}),
+	);
+};
+
 /**
  * Validates and sends the message object.
  */
-export const sendMessage = async function (user: any, message: any, room: any, upsert = false, previewUrls?: string[]) {
+export const sendMessage = async (
+	user: any,
+	message: any,
+	room: any,
+	upsert = false,
+	previewUrls?: string[],
+	filesToConfirm?: IUploadToConfirm[],
+) => {
 	if (!user || !message || !room._id) {
 		return false;
 	}
 
+	const isE2E = isE2EEMessage(message);
+
+	if (filesToConfirm) {
+		await updateFileNames(filesToConfirm, isE2E);
+	}
+
+	const uploadIdsToConfirm = filesToConfirm?.map(({ _id }) => _id);
+
+	if (uploadIdsToConfirm !== undefined && !isE2E) {
+		const uploadsToConfirm: Partial<IUpload>[] = await Uploads.findByIds(uploadIdsToConfirm).toArray();
+		const { files, attachments } = await parseMultipleFilesIntoMessageAttachments(uploadsToConfirm, message.rid, user);
+		message.files = files;
+		message.attachments = attachments;
+	}
+
 	await validateMessage(message, room, user);
 	prepareMessageObject(message, room._id, user);
 
@@ -292,6 +335,10 @@ export const sendMessage = async function (user: any, message: any, room: any, u
 	// TODO: is there an opportunity to send returned data to notifyOnMessageChange?
 	await afterSaveMessage(message, room);
 
+	if (uploadIdsToConfirm !== undefined) {
+		await Uploads.confirmTemporaryFiles(uploadIdsToConfirm, user._id);
+	}
+
 	void notifyOnMessageChange({ id: message._id });
 
 	void notifyOnRoomChangedById(message.rid);

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

@@ -1,5 +1,5 @@
 import { api } from '@rocket.chat/core-services';
-import type { AtLeast, IMessage, IUser } from '@rocket.chat/core-typings';
+import type { AtLeast, IMessage, IUser, IUploadToConfirm } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
 import type { RocketchatI18nKeys } from '@rocket.chat/i18n';
 import { Messages, Users } from '@rocket.chat/models';
@@ -19,7 +19,12 @@ import { MessageTypes } from '../../../ui-utils/server';
 import { sendMessage } from '../functions/sendMessage';
 import { RateLimiter } from '../lib';
 
-export async function executeSendMessage(uid: IUser['_id'], message: AtLeast<IMessage, 'rid'>, previewUrls?: string[]) {
+export async function executeSendMessage(
+	uid: IUser['_id'],
+	message: AtLeast<IMessage, 'rid'>,
+	previewUrls?: string[],
+	filesToConfirm?: IUploadToConfirm[],
+) {
 	if (message.tshow && !message.tmid) {
 		throw new Meteor.Error('invalid-params', 'tshow provided but missing tmid', {
 			method: 'sendMessage',
@@ -96,7 +101,7 @@ export async function executeSendMessage(uid: IUser['_id'], message: AtLeast<IMe
 		}
 
 		metrics.messagesSent.inc(); // TODO This line needs to be moved to it's proper place. See the comments on: https://github.com/RocketChat/Rocket.Chat/pull/5736
-		return await sendMessage(user, message, room, false, previewUrls);
+		return await sendMessage(user, message, room, false, previewUrls, filesToConfirm);
 	} catch (err: any) {
 		SystemLogger.error({ msg: 'Error sending message:', err });
 
@@ -117,12 +122,12 @@ export async function executeSendMessage(uid: IUser['_id'], message: AtLeast<IMe
 declare module '@rocket.chat/ddp-client' {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	interface ServerMethods {
-		sendMessage(message: AtLeast<IMessage, '_id' | 'rid' | 'msg'>, previewUrls?: string[]): any;
+		sendMessage(message: AtLeast<IMessage, '_id' | 'rid' | 'msg'>, previewUrls?: string[], filesToConfirm?: IUploadToConfirm[]): any;
 	}
 }
 
 Meteor.methods<ServerMethods>({
-	async sendMessage(message, previewUrls) {
+	async sendMessage(message, previewUrls, filesToConfirm) {
 		check(message, {
 			_id: Match.Maybe(String),
 			rid: Match.Maybe(String),
@@ -142,6 +147,20 @@ Meteor.methods<ServerMethods>({
 			sentByEmail: Match.Maybe(Boolean),
 		});
 
+		check(
+			filesToConfirm,
+			Match.Maybe([
+				Match.ObjectIncluding({
+					_id: String,
+					name: Match.Maybe(String),
+					content: Match.Maybe({
+						algorithm: String,
+						ciphertext: String,
+					}),
+				}),
+			]),
+		);
+
 		const uid = Meteor.userId();
 		if (!uid) {
 			throw new Meteor.Error('error-invalid-user', 'Invalid user', {
@@ -154,7 +173,7 @@ Meteor.methods<ServerMethods>({
 		}
 
 		try {
-			return await applyAirGappedRestrictionsValidation(() => executeSendMessage(uid, message, previewUrls));
+			return await applyAirGappedRestrictionsValidation(() => executeSendMessage(uid, message, previewUrls, filesToConfirm));
 		} catch (error: any) {
 			if (['error-not-allowed', 'restricted-workspace'].includes(error.error || error.message)) {
 				throw new Meteor.Error(error.error || error.message, error.reason, {

apps/meteor/app/ui/client/lib/ChatMessages.ts

@@ -6,6 +6,7 @@ import { UserAction } from './UserAction';
 import type { ChatAPI, ComposerAPI, DataAPI, UploadsAPI } from '../../../../client/lib/chats/ChatAPI';
 import { createDataAPI } from '../../../../client/lib/chats/data';
 import { processMessageEditing } from '../../../../client/lib/chats/flows/processMessageEditing';
+import { processMessageUploads } from '../../../../client/lib/chats/flows/processMessageUploads';
 import { processSetReaction } from '../../../../client/lib/chats/flows/processSetReaction';
 import { processSlashCommand } from '../../../../client/lib/chats/flows/processSlashCommand';
 import { processTooLongMessage } from '../../../../client/lib/chats/flows/processTooLongMessage';
@@ -42,6 +43,8 @@ export class ChatMessages implements ChatAPI {
 
 	public uploads: UploadsAPI;
 
+	public threadUploads: UploadsAPI;
+
 	public ActionManager: any;
 
 	public emojiPicker: {
@@ -147,7 +150,8 @@ export class ChatMessages implements ChatAPI {
 		const { rid, tmid } = params;
 		this.uid = params.uid;
 		this.data = createDataAPI({ rid, tmid });
-		this.uploads = createUploadsAPI({ rid, tmid });
+		this.uploads = createUploadsAPI({ rid });
+		this.threadUploads = createUploadsAPI({ rid });
 		this.ActionManager = params.actionManager;
 
 		const unimplemented = () => {
@@ -179,6 +183,7 @@ export class ChatMessages implements ChatAPI {
 			processSlashCommand: processSlashCommand.bind(null, this),
 			processTooLongMessage: processTooLongMessage.bind(null, this),
 			processMessageEditing: processMessageEditing.bind(null, this),
+			processMessageUploads: processMessageUploads.bind(null, this),
 			processSetReaction: processSetReaction.bind(null, this),
 			requestMessageDeletion: requestMessageDeletion.bind(this, this),
 			replyBroadcast: replyBroadcast.bind(null, this),

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

@@ -1,7 +1,7 @@
 import type { IMessage, IRoom, ISubscription, IE2EEMessage, IUpload, Subscribable } from '@rocket.chat/core-typings';
 import type { IActionManager } from '@rocket.chat/ui-contexts';
 
-import type { Upload } from './Upload';
+import type { Upload, EncryptedFile } from './Upload';
 import type { ReadStateManager } from './readStateManager';
 import type { FormattingButton } from '../../../app/ui-message/client/messageBox/messageBoxFormatting';
 
@@ -92,17 +92,22 @@ export type DataAPI = {
 	getSubscriptionFromMessage(message: IMessage): Promise<ISubscription>;
 };
 
+export type EncryptedFileUploadContent = {
+	rawFile: File;
+	fileContent: { raw: Partial<IUpload>; encrypted?: IE2EEMessage['content'] | undefined };
+	encryptedFile: EncryptedFile;
+};
+
 export type UploadsAPI = {
 	get(): readonly Upload[];
 	subscribe(callback: () => void): () => void;
 	wipeFailedOnes(): void;
+	clear(): void;
 	cancel(id: Upload['id']): void;
-	send(
-		file: File,
-		{ description, msg, t, e2e }: { description?: string; msg?: string; t?: IMessage['t']; e2e?: IMessage['e2e'] },
-		getContent?: (fileId: string, fileUrl: string) => Promise<IE2EEMessage['content']>,
-		fileContent?: { raw: Partial<IUpload>; encrypted: IE2EEMessage['content'] },
-	): Promise<void>;
+	removeUpload(id: Upload['id']): void;
+	editUploadFileName: (id: Upload['id'], fileName: string) => void;
+	send(file: File, encrypted?: never): Promise<void>;
+	send(file: File, encrypted: EncryptedFileUploadContent): Promise<void>;
 };
 
 export type ChatAPI = {
@@ -111,6 +116,7 @@ export type ChatAPI = {
 	readonly setComposerAPI: (composer?: ComposerAPI) => void;
 	readonly data: DataAPI;
 	readonly uploads: UploadsAPI;
+	readonly threadUploads: UploadsAPI;
 	readonly readStateManager: ReadStateManager;
 	readonly messageEditing: {
 		toPreviousMessage(): Promise<void>;
@@ -141,7 +147,15 @@ export type ChatAPI = {
 	ActionManager: IActionManager;
 
 	readonly flows: {
-		readonly uploadFiles: (files: readonly File[], resetFileInput?: () => void) => Promise<void>;
+		readonly uploadFiles: ({
+			files,
+			uploadsStore,
+			resetFileInput,
+		}: {
+			files: readonly File[];
+			uploadsStore: UploadsAPI;
+			resetFileInput?: () => void;
+		}) => Promise<void>;
 		readonly sendMessage: ({
 			text,
 			tshow,
@@ -150,13 +164,15 @@ export type ChatAPI = {
 			tshow?: boolean;
 			previewUrls?: string[];
 			isSlashCommandAllowed?: boolean;
+			tmid?: IMessage['tmid'];
 		}) => Promise<boolean>;
 		readonly processSlashCommand: (message: IMessage, userId: string | null) => Promise<boolean>;
 		readonly processTooLongMessage: (message: IMessage) => Promise<boolean>;
 		readonly processMessageEditing: (
 			message: Pick<IMessage, '_id' | 't'> & Partial<Omit<IMessage, '_id' | 't'>>,
 			previewUrls?: string[],
 		) => Promise<boolean>;
+		readonly processMessageUploads: (message: IMessage) => Promise<boolean>;
 		readonly processSetReaction: (message: Pick<IMessage, 'msg'>) => Promise<boolean>;
 		readonly requestMessageDeletion: (message: IMessage) => Promise<void>;
 		readonly replyBroadcast: (message: IMessage) => Promise<void>;