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 them in a single message

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

@@ -274,7 +274,7 @@ API.v1.addRoute(
 				sendFileMessage(this.userId, { roomId: this.urlParams.rid, file, msgData: this.bodyParams }, { parseAttachmentsForE2EE: false }),
 			);
 
-			await Uploads.confirmTemporaryFile(this.urlParams.fileId, this.userId);
+			await Uploads.confirmTemporaryFile(file._id, this.userId);
 
 			const message = await Messages.getMessageByFileIdAndUsername(file._id, this.userId);
 

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

@@ -9,7 +9,9 @@ import type {
 	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';
 
@@ -23,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 { AppEvents, Apps } from '@rocket.chat/apps';
 import { 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 } from '../lib/notifyListener';
@@ -213,15 +214,62 @@ 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.
  * Validates and sends the message object. This function does not verify the Message_MaxAllowedSize settings.
  * Caller of the function should verify the Message_MaxAllowedSize if needed.
  * There might be same use cases which needs to override this setting. Example - sending error logs.
  */
-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?.length && !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;
+		// For compatibility with older integrations, we save the first file to the `file` attribute of the message
+		if (files.length) {
+			message.file = files[0];
+		}
+	}
+
 	await validateMessage(message, room, user);
 	prepareMessageObject(message, room._id, user);
 
@@ -287,6 +335,10 @@ export const sendMessage = async function (user: any, message: any, room: any, u
 
 	await afterSaveMessage(message, room, user);
 
+	if (uploadIdsToConfirm?.length) {
+		await Uploads.confirmTemporaryFiles(uploadIdsToConfirm, user._id);
+	}
+
 	void notifyOnRoomChangedById(message.rid);
 
 	return message;

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, type IMessage, type IUser, type IUploadToConfirm } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
 import type { RocketchatI18nKeys } from '@rocket.chat/i18n';
 import { MessageTypes } from '@rocket.chat/message-types';
@@ -32,7 +32,7 @@ import { RateLimiter } from '../lib';
 export async function executeSendMessage(
 	uid: IUser['_id'],
 	message: AtLeast<IMessage, 'rid'>,
-	extraInfo?: { ts?: Date; previewUrls?: string[] },
+	extraInfo?: { ts?: Date; previewUrls?: string[]; filesToConfirm?: IUploadToConfirm[] },
 ) {
 	if (message.tshow && !message.tmid) {
 		throw new Meteor.Error('invalid-params', 'tshow provided but missing tmid', {
@@ -106,7 +106,7 @@ export async function executeSendMessage(
 		}
 
 		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, extraInfo?.previewUrls);
+		return await sendMessage(user, message, room, false, extraInfo?.previewUrls, extraInfo?.filesToConfirm);
 	} catch (err: any) {
 		SystemLogger.error({ msg: 'Error sending message:', err });
 
@@ -127,12 +127,12 @@ export async function executeSendMessage(
 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),
@@ -151,6 +151,37 @@ Meteor.methods<ServerMethods>({
 			sentByEmail: Match.Maybe(Boolean),
 		});
 
+		check(
+			filesToConfirm,
+			Match.Maybe([
+				Match.ObjectIncluding({
+					_id: String,
+					name: Match.Maybe(String),
+					content: Match.Maybe(
+						Match.OneOf(
+							{
+								algorithm: 'rc.v1.aes-sha2',
+								ciphertext: String,
+							},
+							{
+								algorithm: 'rc.v2.aes-sha2',
+								ciphertext: String,
+								kid: String,
+								iv: String,
+							},
+						),
+					),
+				}),
+			]),
+		);
+
+		const maxFilesPerMessage = settings.get<number>('FileUpload_MaxFilesPerMessage');
+		if (filesToConfirm && maxFilesPerMessage && filesToConfirm.length > maxFilesPerMessage) {
+			throw new Meteor.Error('error-too-many-files', `Cannot send more than ${maxFilesPerMessage} files in one message`, {
+				method: 'sendMessage',
+			});
+		}
+
 		const uid = Meteor.userId();
 		if (!uid) {
 			throw new Meteor.Error('error-invalid-user', 'Invalid user', {
@@ -163,7 +194,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/livechat/server/api/v1/message.ts

@@ -104,7 +104,7 @@ API.v1.addRoute(
 				throw new Error('invalid-message');
 			}
 
-			if (message.file) {
+			if (message.file || message.files?.length) {
 				message = { ...(await normalizeMessageFileUpload(message)), ...{ _updatedAt: message._updatedAt } };
 			}
 
@@ -148,7 +148,7 @@ API.v1.addRoute(
 				return API.v1.failure();
 			}
 
-			if (message?.file) {
+			if (message.file || message.files?.length) {
 				message = { ...(await normalizeMessageFileUpload(message)), ...{ _updatedAt: message._updatedAt } };
 			}
 

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

@@ -7,6 +7,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';
@@ -44,6 +45,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 {
 		this.tmid = tmid;
 		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;
 		this.currentEditingMessage = new CurrentEditingMessage(this);
 
@@ -180,6 +184,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/app/utils/server/functions/normalizeMessageFileUpload.ts

@@ -1,30 +1,49 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Uploads } from '@rocket.chat/models';
+import { isTruthy } from '@rocket.chat/tools';
 
 import { FileUpload } from '../../../file-upload/server';
 import { getURL } from '../getURL';
 
+const generateFileUploadData = async (
+	message: Pick<IMessage, 'rid' | 'u'>,
+	fileId: string,
+): Promise<{ publicFilePath: string; type?: string; size?: number } | null> => {
+	const jwt = FileUpload.generateJWTToFileUrls({
+		rid: message.rid,
+		userId: message.u._id,
+		fileId,
+	});
+	const file = await Uploads.findOne({ _id: fileId });
+	if (!file) {
+		return null;
+	}
+	return {
+		publicFilePath: file.name
+			? getURL(`${FileUpload.getPath(`${file._id}/${encodeURI(file.name)}`).substring(1)}${jwt ? `?token=${jwt}` : ''}`, {
+					cdn: false,
+					full: true,
+				})
+			: '',
+		type: file.type,
+		size: file.size,
+	};
+};
+
 export const normalizeMessageFileUpload = async (message: Omit<IMessage, '_updatedAt'>): Promise<Omit<IMessage, '_updatedAt'>> => {
+	// handle deprecated single file property for backward compatibility
 	if (message.file && !message.fileUpload) {
-		const jwt = FileUpload.generateJWTToFileUrls({
-			rid: message.rid,
-			userId: message.u._id,
-			fileId: message.file._id,
-		});
-		const file = await Uploads.findOne({ _id: message.file._id });
-		if (!file) {
-			return message;
+		const fileUploadData = await generateFileUploadData(message, message.file._id);
+		if (fileUploadData) {
+			message.fileUpload = fileUploadData;
 		}
-		message.fileUpload = {
-			publicFilePath: file.name
-				? getURL(`${FileUpload.getPath(`${file._id}/${encodeURI(file.name)}`).substring(1)}${jwt ? `?token=${jwt}` : ''}`, {
-						cdn: false,
-						full: true,
-					})
-				: '',
-			type: file.type,
-			size: file.size,
-		};
 	}
+
+	// handle multiple files
+	if (message.files?.length && !message.filesUpload) {
+		const filesUploadData = await Promise.all(message.files.map((file) => generateFileUploadData(message, file._id)));
+		message.filesUpload = filesUploadData.filter(isTruthy);
+	}
+
 	return message;
 };