feat: Multiple file sharing in one message

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

@@ -70,7 +70,9 @@
 
  try {
  attachment.image_preview = await FileUpload.resizeImagePreview(file);
+ console.log('attachement image preview ' + attachment.image_preview);
  const thumbResult = await FileUpload.createImageThumbnail(file);
+ console.log('thumbResult ' + thumbResult);
  if (thumbResult) {
  const { data: thumbBuffer, width, height, thumbFileType, thumbFileName, originalFileId } = thumbResult;
  const thumbnail = await FileUpload.uploadImageThumbnail(
@@ -83,6 +85,7 @@
  roomId,
  user._id,
  );
+ console.log('thumbnail ' + thumbnail);
  const thumbUrl = FileUpload.getPath(`${thumbnail._id}/${encodeURI(file.name || '')}`);
  attachment.image_url = thumbUrl;
  attachment.image_type = thumbnail.type;
@@ -97,6 +100,7 @@
  size: thumbnail.size || 0,
  format: thumbnail.identify?.format || '',
  });
+ console.log(files);
  }
  } catch (e) {
  SystemLogger.error(e);

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

@@ -1,7 +1,7 @@
 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, FileProp, MessageAttachment } from '@rocket.chat/core-typings';
+import { Messages, Uploads } from '@rocket.chat/models';
 import { Match, check } from 'meteor/check';
 
 import { isRelativeURL } from '../../../../lib/utils/isRelativeURL';
@@ -13,6 +13,7 @@
 import { notifyOnRoomChangedById, notifyOnMessageChange } from '../lib/notifyListener';
 import { validateCustomMessageFields } from '../lib/validateCustomMessageFields';
 import { parseUrlsInMessage } from './parseUrlsInMessage';
+import { parseFileIntoMessageAttachments } from '../../../../app/file-upload/server/methods/sendFileMessage';
 
 // TODO: most of the types here are wrong, but I don't want to change them now
 
@@ -215,11 +216,46 @@
 /**
  * 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 messageFiles: FileProp[] = [];
+ const messageAttachments: MessageAttachment[] = [];
+ const fileAttachmentPromises = filesToConfirm.map(async (file) => {
+ const roomId = message.rid;
+ const { files, attachments } = await parseFileIntoMessageAttachments(file, roomId, user);
+ return { files, attachments };
+ });
+ const filesAndAttachments = await Promise.all(fileAttachmentPromises);
+ filesAndAttachments.forEach(({ files, attachments }) => {
+ messageFiles.push(...files);
+ messageAttachments.push(...attachments);
+ });
+ message.files = messageFiles;
+ message.attachments = messageAttachments;
+ }
+ }
+
  await validateMessage(message, room, user);
  prepareMessageObject(message, room._id, user);
 
@@ -292,6 +328,10 @@
  // 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

@@ -16,7 +16,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',
@@ -93,7 +98,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 });
 
@@ -114,12 +119,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();
@@ -132,9 +137,8 @@ Meteor.methods<ServerMethods>({
  if (MessageTypes.isSystemMessage(message)) {
  throw new Error("Cannot send system messages using 'sendMessage'");
  }
-
  try {
- return await executeSendMessage(uid, message, previewUrls);
+ return await executeSendMessage(uid, message, previewUrls, uploadIdsToConfirm);
  } catch (error: any) {
  if ((error.error || error.message) === 'error-not-allowed') {
  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/uploads.ts

@@ -30,9 +30,9 @@
 };
 
 const send = async (
- file: File,
+ file: File[] | File,
  {
  description,
  msg,
  rid,
  tmid,
@@ -44,41 +44,41 @@
  tmid?: string;
  t?: IMessage['t'];
  },
- 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> => {
+ const files = Array.isArray(file) ? file : [file];
  const id = Random.id();
-
  updateUploads((uploads) => [
  ...uploads,
  {
  id,
- name: fileContent?.raw.name || file.name,
+ name: files[0].name || fileContent?.raw.name || 'unknown',
  percentage: 0,
  },
  ]);
 
- try {
- await new Promise((resolve, reject) => {
+ const fileIds: string[] = [];
+ const fileUrls: string[] = [];
+
+ files.forEach((f) => {
+ new Promise<void>((resolve, reject) => {
  const xhr = sdk.rest.upload(
  `/v1/rooms.media/${rid}`,
  {
- file,
+ file: f,
  ...(fileContent && {
  content: JSON.stringify(fileContent.encrypted),
  }),
  },
  {
- load: (event) => {
- resolve(event);
- },
  progress: (event) => {
  if (!event.lengthComputable) {
  return;
  }
  const progress = (event.loaded / event.total) * 100;
  if (progress === 100) {
- return;
+ resolve();
  }
 
  updateUploads((uploads) =>
@@ -116,51 +116,62 @@
  xhr.onload = async () => {
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
  const result = JSON.parse(xhr.responseText);
- let content;
- if (getContent) {
- content = await getContent(result.file._id, result.file.url);
- }
+ fileIds.push(result.file._id);
+ fileUrls.push(result.file.url);
+ if (fileIds.length === files.length) {
+ if (msg === undefined) {
+ msg = '';
+ }
 
- await sdk.rest.post(`/v1/rooms.mediaConfirm/${rid}/${result.file._id}`, {
- msg,
- tmid,
- description,
- t,
- content,
- });
+ try {
+ let content;
+ if (getContent) {
+ content = await getContent(fileIds, fileUrls);
+ }
+ const text: IMessage = {
+ rid,
+ _id: id,
+ msg: msg || '',
+ ts: new Date(),
+ u: { _id: id, username: id },
+ _updatedAt: new Date(),
+ tmid,
+ t,
+ content,
+ };
+ await sdk.call('sendMessage', text, fileUrls, fileIds);
+
+ updateUploads((uploads) => uploads.filter((upload) => upload.id !== id));
+ } catch (error) {
+ updateUploads((uploads) =>
+ uploads.map((upload) => {
+ if (upload.id !== id) {
+ return upload;
+ }
+
+ return {
+ ...upload,
+ percentage: 0,
+ error: new Error(getErrorMessage(error)),
+ };
+ }),
+ );
+ } finally {
+ if (!uploads.length) {
+ UserAction.stop(rid, USER_ACTIVITIES.USER_UPLOADING, { tmid });
+ }
+ }
+ }
  }
  };
 
- 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));
- } catch (error: unknown) {
- updateUploads((uploads) =>
- uploads.map((upload) => {
- if (upload.id !== id) {
- return upload;
- }
-
- return {
- ...upload,
- percentage: 0,
- error: new Error(getErrorMessage(error)),
- };
- }),
- );
- } finally {
- if (!uploads.length) {
- UserAction.stop(rid, USER_ACTIVITIES.USER_UPLOADING, { tmid });
- }
- }
+ });
 };
 
 export const createUploadsAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid?: IMessage['_id'] }): UploadsAPI => ({
@@ -169,9 +180,9 @@
  wipeFailedOnes,
  cancel,
  send: (
- file: File,
+ file: File[] | File,
  { description, msg, t }: { description?: string; msg?: string; t?: IMessage['t'] },
- 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> => send(file, { description, msg, rid, tmid, t }, getContent, fileContent),
 });

apps/meteor/client/providers/ImageGalleryProvider.tsx

@@ -23,8 +23,10 @@ const ImageGalleryProvider = ({ children }: ImageGalleryProviderProps) => {
  return setSingleImageUrl(target.dataset.id);
  }
  if (target?.classList.contains('gallery-item')) {
+ const id1 = target.dataset.src?.split('/file-upload/')[1].split('/')[0];
+
  const id = target.closest('.gallery-item-container')?.getAttribute('data-id') || undefined;
- return setImageId(target.dataset.id || id);
+ return setImageId(id1 || target.dataset.id || id);
  }
  if (target?.classList.contains('gallery-item-container')) {
  return setImageId(target.dataset.id);