[FIX] Add missing .png to clipboard uploaded file name (#23833)

app/ui-message/client/messageBox/messageBox.js

@@ -34,6 +34,7 @@ import './messageBoxAudioMessage';
 import './messageBoxNotSubscribed';
 import './messageBox.html';
 import './messageBoxReadOnly';
+import { getImageExtensionFromMime } from '../../../../lib/getImageExtensionFromMime';
 import { keyCodes } from '../../../../client/lib/utils/keyCodes';
 import { isRTL } from '../../../../client/lib/utils/isRTL';
 import { call } from '../../../../client/lib/utils/call';
@@ -400,11 +401,18 @@ Template.messageBox.events({
 
 		const files = items
 			.filter((item) => item.kind === 'file' && item.type.indexOf('image/') !== -1)
-			.map((item) => ({
-				file: item.getAsFile(),
-				name: `Clipboard - ${ moment().format(settings.get('Message_TimeAndDateFormat')) }`,
-			}))
-			.filter(({ file }) => file !== null);
+			.map((item) => {
+				const fileItem = item.getAsFile();
+
+				const imageExtension = getImageExtensionFromMime(fileItem.type);
+
+				const extension = imageExtension ? `.${ imageExtension }` : '';
+
+				return {
+					file: fileItem,
+					name: `Clipboard - ${ moment().format(settings.get('Message_TimeAndDateFormat')) }${ extension }`,
+				};
+			}).filter(({ file }) => file !== null);
 
 		if (files.length) {
 			event.preventDefault();

client/views/room/modals/FileUploadModal/FileUploadModal.tsx

@@ -21,7 +21,7 @@ import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesConte
 import { useTranslation } from '../../../../contexts/TranslationContext';
 import FilePreview from './FilePreview';
 
-type FilePreviewModalProps = {
+type FileUploadModalProps = {
 	onClose: () => void;
 	onSubmit: (name: string, description?: string) => void;
 	file: File;
@@ -29,13 +29,13 @@ type FilePreviewModalProps = {
 	invalidContentType: boolean;
 };
 
-const FilePreviewModal = ({
+const FileUploadModal = ({
 	onClose,
 	file,
 	fileName,
 	onSubmit,
 	invalidContentType,
-}: FilePreviewModalProps): ReactElement => {
+}: FileUploadModalProps): ReactElement => {
 	const [name, setName] = useState<string>(fileName);
 	const [description, setDescription] = useState<string>('');
 	const t = useTranslation();
@@ -137,4 +137,4 @@ const FilePreviewModal = ({
 	);
 };
 
-export default memo(FilePreviewModal);
+export default memo(FileUploadModal);

lib/getImageExtensionFromMime.ts

@@ -0,0 +1,14 @@
+const extensionsMap: Record<string, string> = {
+	'image/apng': 'apng',
+	'image/avif': 'avif',
+	'image/gif': 'gif',
+	'image/jpeg': 'jpg',
+	'image/png': 'png',
+	'image/svg+xml': 'svg',
+	'image/webp': 'webp',
+	'image/bmp': 'bmp',
+	'image/x-icon': 'ico',
+	'image/tiff': 'tif',
+};
+
+export const getImageExtensionFromMime = (mime: string): string | undefined => extensionsMap[mime];