regression(E2EEncryption): Fix PDF preview & download not working on electron/desktop app (#32698)

apps/meteor/client/components/message/content/attachments/file/GenericFileAttachment.tsx

@@ -6,11 +6,14 @@ import {
 	MessageGenericPreviewTitle,
 	MessageGenericPreviewDescription,
 } from '@rocket.chat/fuselage';
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useMediaUrl } from '@rocket.chat/ui-contexts';
 import type { UIEvent } from 'react';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { getFileExtension } from '../../../../../../lib/utils/getFileExtension';
+import { forAttachmentDownload, registerDownloadForUid } from '../../../../../hooks/useDownloadFromServiceWorker';
 import MarkdownText from '../../../../MarkdownText';
 import MessageCollapsible from '../../../MessageCollapsible';
 import MessageContentBody from '../../../MessageContentBody';
@@ -31,18 +34,33 @@ const GenericFileAttachment = ({
 	collapsed,
 }: GenericFileAttachmentProps) => {
 	const getURL = useMediaUrl();
+	const uid = useUniqueId();
+	const { t } = useTranslation();
 
 	const handleTitleClick = (event: UIEvent): void => {
-		if (openDocumentViewer && link && format === 'PDF') {
+		if (openDocumentViewer && link) {
 			event.preventDefault();
-			openDocumentViewer(`${getURL(link)}?contentDisposition=inline`, format, '');
+
+			if (format === 'PDF') {
+				const url = new URL(getURL(link));
+				url.searchParams.set('contentDisposition', 'inline');
+				openDocumentViewer(url.toString(), format, '');
+				return;
+			}
+
+			registerDownloadForUid(uid, t, title);
+			forAttachmentDownload(uid, link);
 		}
 	};
 
 	const getExternalUrl = () => {
 		if (!hasDownload || !link) return undefined;
 
-		if (openDocumentViewer) return `${getURL(link)}?download`;
+		if (openDocumentViewer) {
+			const url = new URL(getURL(link), window.location.host);
+			url.searchParams.set('download', '');
+			return url.toString();
+		}
 
 		return getURL(link);
 	};

apps/meteor/client/hooks/useDownloadFromServiceWorker.ts

@@ -15,6 +15,23 @@ navigator.serviceWorker.addEventListener('message', (event) => {
 	}
 });
 
+export const registerDownloadForUid = (uid: string, t: ReturnType<typeof useTranslation>['t'], title?: string) => {
+	ee.once(uid, ({ result }) => {
+		downloadAs({ data: [new Blob([result])] }, title ?? t('Download'));
+	});
+};
+
+export const forAttachmentDownload = (uid: string, href: string, controller?: ServiceWorker | null) => {
+	if (!controller) {
+		controller = navigator.serviceWorker.controller;
+	}
+	controller?.postMessage({
+		type: 'attachment-download',
+		url: href,
+		id: uid,
+	});
+};
+
 export const useDownloadFromServiceWorker = (href: string, title?: string) => {
 	const { controller } = navigator.serviceWorker;
 
@@ -22,13 +39,7 @@ export const useDownloadFromServiceWorker = (href: string, title?: string) => {
 
 	const { t } = useTranslation();
 
-	useEffect(
-		() =>
-			ee.once(uid, ({ result }) => {
-				downloadAs({ data: [new Blob([result])] }, title ?? t('Download'));
-			}),
-		[title, t, uid],
-	);
+	useEffect(() => registerDownloadForUid(uid, t, title), [title, t, uid]);
 
 	return {
 		disabled: !controller,
@@ -37,11 +48,7 @@ export const useDownloadFromServiceWorker = (href: string, title?: string) => {
 			(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
 				e.preventDefault();
 
-				controller?.postMessage({
-					type: 'attachment-download',
-					url: href,
-					id: uid,
-				});
+				forAttachmentDownload(uid, href, controller);
 			},
 			[href, uid, controller],
 		),

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

@@ -3,6 +3,7 @@ import { isRoomFederated } from '@rocket.chat/core-typings';
 
 import { e2e } from '../../../../app/e2e/client';
 import { fileUploadIsValidContentType } from '../../../../app/utils/client';
+import { getFileExtension } from '../../../../lib/utils/getFileExtension';
 import FileUploadModal from '../../../views/room/modals/FileUploadModal';
 import { imperativeModal } from '../../imperativeModal';
 import { prependReplies } from '../../utils/prependReplies';
@@ -137,7 +138,7 @@ export const uploadFiles = async (chat: ChatAPI, files: readonly File[], resetFi
 								attachments.push({
 									...attachment,
 									size: file.size,
-									// format: getFileExtension(file.name),
+									format: getFileExtension(file.name),
 								});
 							}
 

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

@@ -8,6 +8,7 @@ import { useSubscription } from 'use-subscription';
 
 import { getUserDisplayName } from '../../../../../lib/getUserDisplayName';
 import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
+import AttachmentProvider from '../../../../providers/AttachmentProvider';
 import { useChat } from '../../contexts/ChatContext';
 
 const MessageBoxReplies = (): ReactElement | null => {
@@ -39,19 +40,21 @@ const MessageBoxReplies = (): ReactElement | null => {
 			{replies.map((reply, key) => (
 				<Margins block={4} key={key}>
 					<Box display='flex' position='relative'>
-						<QuoteAttachment
-							attachment={
-								{
-									text: reply.msg,
-									md: reply.md,
-									author_name: reply.alias || getUserDisplayName(reply.u.name, reply.u.username, useRealName),
-									author_icon: `/avatar/${reply.u.username}`,
-									ts: reply.ts,
-									attachments: reply?.attachments?.map((obj) => ({ ...obj, collapsed: true })),
-									collapsed: true,
-								} as MessageQuoteAttachment
-							}
-						/>
+						<AttachmentProvider>
+							<QuoteAttachment
+								attachment={
+									{
+										text: reply.msg,
+										md: reply.md,
+										author_name: reply.alias || getUserDisplayName(reply.u.name, reply.u.username, useRealName),
+										author_icon: `/avatar/${reply.u.username}`,
+										ts: reply.ts,
+										attachments: reply?.attachments?.map((obj) => ({ ...obj, collapsed: true })),
+										collapsed: true,
+									} as MessageQuoteAttachment
+								}
+							/>
+						</AttachmentProvider>
 						<Box
 							className={closeWrapperStyle}
 							data-mid={reply._id}

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

@@ -7,6 +7,7 @@ import React from 'react';
 import GenericModal from '../../../../components/GenericModal';
 import { QuoteAttachment } from '../../../../components/message/content/attachments/QuoteAttachment';
 import { useUserDisplayName } from '../../../../hooks/useUserDisplayName';
+import AttachmentProvider from '../../../../providers/AttachmentProvider';
 
 type PinMessageModalProps = { message: IMessage } & ComponentProps<typeof GenericModal>;
 
@@ -31,7 +32,9 @@ const PinMessageModal = ({ message, ...props }: PinMessageModalProps): ReactElem
 			<Box mbe={16} is='p'>
 				{t('Are_you_sure_you_want_to_pin_this_message')}
 			</Box>
-			<QuoteAttachment attachment={attachment} />
+			<AttachmentProvider>
+				<QuoteAttachment attachment={attachment} />
+			</AttachmentProvider>
 			<Box is='p' fontScale='c1' mbs={16}>
 				{t('Pinned_messages_are_visible_to_everyone')}
 			</Box>