feat: multiple file sharing in one message

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

@@ -6,6 +6,7 @@ import type {
 	AtLeast,
 	FilesAndAttachments,
 	IMessage,
+	FileProp,
 } from '@rocket.chat/core-typings';
 import type { ServerMethods } from '@rocket.chat/ddp-client';
 import { Rooms, Uploads, Users } from '@rocket.chat/models';
@@ -29,6 +30,38 @@ function validateFileRequiredFields(file: Partial<IUpload>): asserts file is AtL
 	});
 }
 
+export const parseMultipleFilesIntoMessageAttachments = async (
+	filesToConfirm: Partial<IUpload>[],
+	roomId: string,
+	user: IUser,
+): Promise<{ files: FileProp[]; attachments: MessageAttachment[] }> => {
+	const messageFiles: FileProp[] = [];
+	const messageAttachments: MessageAttachment[] = [];
+
+	const filesAndAttachments = await Promise.all(
+		filesToConfirm
+			.filter((files: Partial<IUpload>) => !!files)
+			.map(async (file) => {
+				try {
+					const { files, attachments } = await parseFileIntoMessageAttachments(file, roomId, user);
+					return { files, attachments };
+				} catch (error) {
+					console.error('Error processing file:', file, error);
+					return { files: [], attachments: [] };
+				}
+			}),
+	);
+
+	filesAndAttachments
+		.filter(({ files, attachments }) => files.length || attachments.length)
+		.forEach(({ files, attachments }) => {
+			messageFiles.push(...files);
+			messageAttachments.push(...attachments);
+		});
+
+	return { files: messageFiles, attachments: messageAttachments };
+};
+
 export const parseFileIntoMessageAttachments = async (
 	file: Partial<IUpload>,
 	roomId: string,

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

@@ -1,13 +1,14 @@
 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 type { IMessage, IRoom, IUpload } from '@rocket.chat/core-typings';
+import { Messages, Uploads } from '@rocket.chat/models';
 import { Match, check } from 'meteor/check';
 
 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';
@@ -215,11 +216,35 @@ export function prepareMessageObject(
 /**
  * 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 function (
+	user: any,
+	message: any,
+	room: any,
+	upsert = false,
+	previewUrls?: string[],
+	uploadIdsToConfirm?: string[],
+) {
 	if (!user || !message || !room._id) {
 		return false;
 	}
 
+	if (uploadIdsToConfirm !== undefined) {
+		const filesToConfirm: Partial<IUpload>[] = await Promise.all(
+			uploadIdsToConfirm.map(async (fileid) => {
+				const file = await Uploads.findOneById(fileid);
+				if (!file) {
+					throw new Meteor.Error('invalid-file');
+				}
+				return file;
+			}),
+		);
+		if (message?.t !== 'e2e') {
+			const { files, attachments } = await parseMultipleFilesIntoMessageAttachments(filesToConfirm, message.rid, user);
+			message.files = files;
+			message.attachments = attachments;
+		}
+	}
+
 	await validateMessage(message, room, user);
 	prepareMessageObject(message, room._id, user);
 
@@ -292,6 +317,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 Promise.all(uploadIdsToConfirm.map((fileid) => Uploads.confirmTemporaryFile(fileid, user._id)));
+	}
+
 	void notifyOnMessageChange({ id: message._id });
 
 	void notifyOnRoomChangedById(message.rid);

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

@@ -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[],
+	uploadIdsToConfirm?: string[],
+) {
 	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, uploadIdsToConfirm);
 	} 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[], uploadIdsToConfirm?: string[]): any;
 	}
 }
 
 Meteor.methods<ServerMethods>({
-	async sendMessage(message, previewUrls) {
+	async sendMessage(message, previewUrls, uploadIdsToConfirm) {
 		check(message, Object);
 
 		const uid = Meteor.userId();
@@ -137,7 +142,7 @@ Meteor.methods<ServerMethods>({
 		}
 
 		try {
-			return await applyAirGappedRestrictionsValidation(() => executeSendMessage(uid, message, previewUrls));
+			return await applyAirGappedRestrictionsValidation(() => executeSendMessage(uid, message, previewUrls, uploadIdsToConfirm));
 		} 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/client/lib/chats/ChatAPI.ts

@@ -101,10 +101,10 @@ export type UploadsAPI = {
 	wipeFailedOnes(): void;
 	cancel(id: Upload['id']): void;
 	send(
-		file: File,
+		file: 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'] },
+		getContent?: (fileId: string[], fileUrl: string[]) => Promise<IE2EEMessage['content']>,
+		fileContent?: { raw: Partial<IUpload>; encrypted?: { algorithm: string; ciphertext: string } | undefined },
 	): Promise<void>;
 };
 

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

@@ -35,7 +35,7 @@ export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFi
 	const uploadFile = (
 		file: File,
 		extraData?: Pick<IMessage, 't' | 'e2e'> & { description?: string },
-		getContent?: (fileId: string, fileUrl: string) => Promise<IE2EEMessage['content']>,
+		getContent?: (fileId: string[], fileUrl: string[]) => Promise<IE2EEMessage['content']>,
 		fileContent?: { raw: Partial<IUpload>; encrypted: IE2EEMessage['content'] },
 	) => {
 		chat.uploads.send(
@@ -99,8 +99,10 @@ export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFi
 					const encryptedFile = await e2eRoom.encryptFile(file);
 
 					if (encryptedFile) {
-						const getContent = async (_id: string, fileUrl: string): Promise<IE2EEMessage['content']> => {
+						const getContent = async (filesId: string[], filesUrl: string[]): Promise<IE2EEMessage['content']> => {
 							const attachments = [];
+							const _id = filesId[0];
+							const fileUrl = filesUrl[0];
 
 							const attachment: FileAttachmentProps = {
 								title: file.name,

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

@@ -0,0 +1,143 @@
+import type { IUpload } from '@rocket.chat/core-typings';
+import { Emitter } from '@rocket.chat/emitter';
+import { Random } from '@rocket.chat/random';
+
+import { UserAction, USER_ACTIVITIES } from '../../../app/ui/client/lib/UserAction';
+import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { getErrorMessage } from '../errorHandling';
+import type { Upload } from './Upload';
+
+let uploads: readonly Upload[] = [];
+
+const emitter = new Emitter<{ update: void; [x: `cancelling-${Upload['id']}`]: void }>();
+
+const updateUploads = (update: (uploads: readonly Upload[]) => readonly Upload[]): void => {
+	uploads = update(uploads);
+	emitter.emit('update');
+};
+export const uploadAndGetIds = async (
+	file: File,
+	{
+		rid,
+		tmid,
+		fileContent,
+	}: {
+		rid: string;
+		tmid?: string;
+		fileContent?: { raw: Partial<IUpload>; encrypted?: { algorithm: string; ciphertext: string } | undefined };
+	},
+): Promise<{ fileId: string; fileUrl: string }> => {
+	const id = Random.id();
+
+	updateUploads((uploads) => [
+		...uploads,
+		{
+			id,
+			name: fileContent?.raw.name || file.name,
+			percentage: 0,
+		},
+	]);
+
+	try {
+		const result = await new Promise<{ fileId: string; fileUrl: string }>((resolve, reject) => {
+			const xhr = sdk.rest.upload(
+				`/v1/rooms.media/${rid}`,
+				{
+					file,
+					...(fileContent && {
+						content: JSON.stringify(fileContent.encrypted),
+					}),
+				},
+				{
+					load: (event) => {
+						console.log('from uploadfiles event', event);
+					},
+					progress: (event) => {
+						if (!event.lengthComputable) {
+							return;
+						}
+						const progress = (event.loaded / event.total) * 100;
+						if (progress === 100) {
+							return;
+						}
+
+						updateUploads((uploads) =>
+							uploads.map((upload) => {
+								if (upload.id !== id) {
+									return upload;
+								}
+
+								return {
+									...upload,
+									percentage: Math.round(progress) || 0,
+								};
+							}),
+						);
+					},
+					error: (event) => {
+						updateUploads((uploads) =>
+							uploads.map((upload) => {
+								if (upload.id !== id) {
+									return upload;
+								}
+
+								return {
+									...upload,
+									percentage: 0,
+									error: new Error(xhr.responseText),
+								};
+							}),
+						);
+						reject(event);
+					},
+				},
+			);
+
+			xhr.onload = () => {
+				if (xhr.readyState === xhr.DONE && xhr.status === 200) {
+					const response = JSON.parse(xhr.responseText);
+
+					resolve({
+						fileId: response.file._id,
+						fileUrl: response.file.url,
+					});
+				} else {
+					reject(new Error('File upload failed.'));
+				}
+			};
+
+			if (uploads.length) {
+				UserAction.performContinuously(rid, USER_ACTIVITIES.USER_UPLOADING, { tmid });
+			}
+
+			emitter.once(`cancelling-${id}`, () => {
+				xhr.abort();
+				updateUploads((uploads) => uploads.filter((upload) => upload.id !== id));
+				reject(new Error('Upload cancelled.'));
+			});
+		});
+
+		updateUploads((uploads) => uploads.filter((upload) => upload.id !== id));
+
+		return result;
+	} catch (error: unknown) {
+		updateUploads((uploads) =>
+			uploads.map((upload) => {
+				if (upload.id !== id) {
+					return upload;
+				}
+
+				return {
+					...upload,
+					percentage: 0,
+					error: new Error(getErrorMessage(error)),
+				};
+			}),
+		);
+		throw error;
+	} finally {
+		if (!uploads.length) {
+			UserAction.stop(rid, USER_ACTIVITIES.USER_UPLOADING, { tmid });
+		}
+	}
+};