diff --git a/app/ui-message/client/messageBox/messageBox.js b/app/ui-message/client/messageBox/messageBox.js index d8cf0424def..b742e8114a3 100644 --- a/app/ui-message/client/messageBox/messageBox.js +++ b/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(); diff --git a/client/views/room/modals/FileUploadModal/FileUploadModal.tsx b/client/views/room/modals/FileUploadModal/FileUploadModal.tsx index f7faeba7749..06993801058 100644 --- a/client/views/room/modals/FileUploadModal/FileUploadModal.tsx +++ b/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(fileName); const [description, setDescription] = useState(''); const t = useTranslation(); @@ -137,4 +137,4 @@ const FilePreviewModal = ({ ); }; -export default memo(FilePreviewModal); +export default memo(FileUploadModal); diff --git a/lib/getImageExtensionFromMime.ts b/lib/getImageExtensionFromMime.ts new file mode 100644 index 00000000000..f93f778aaeb --- /dev/null +++ b/lib/getImageExtensionFromMime.ts @@ -0,0 +1,14 @@ +const extensionsMap: Record = { + '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];