Regression: Prevent duplicated .jpg on file upload (#3658)

* [FIX] Regression: Prevent duplicated .jpg on file upload

* refactor to all files typed as image/jpeg

* isolate regexp to function

* refactor forceJpgExtension

* clean

* minor tweak

* [FIX] Regression: Prevent duplicated .jpg on file upload

* refactor to all files typed as image/jpeg

* isolate regexp to function

* refactor forceJpgExtension

* clean

* minor tweak

* refactored comment

app/containers/MessageBox/forceJpgExtension.test.ts

@@ -0,0 +1,107 @@
+import { Image } from 'react-native-image-crop-picker';
+
+import { forceJpgExtension } from './forceJpgExtension';
+
+const attachment: Image = {
+	exif: null,
+	filename: 'IMG_0040.PNG',
+	path: 'tmp/temp',
+	height: 534,
+	width: 223,
+	data: null,
+	modificationDate: '1643984790',
+	localIdentifier: 'device/L0/001',
+	size: 16623,
+	sourceURL: '',
+	mime: 'image/jpeg',
+	cropRect: null,
+	creationDate: '1641490665'
+};
+
+describe('forceJpgExtension for iOS', () => {
+	jest.mock('react-native', () => ({ Platform: { OS: 'ios' } }));
+	describe('with mime as image/jpeg', () => {
+		test('filename.jpg should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.jpg';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpg');
+		});
+		test('filename.png should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.png';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpg');
+		});
+		test('filename.jpeg should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.jpeg';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpg');
+		});
+		test('filename.heic should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.heic';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpg');
+		});
+	});
+	describe('with mime different', () => {
+		test('filename.jpg should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.png';
+			newAttachment.mime = 'image/png';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.png');
+		});
+	});
+});
+
+describe('forceJpgExtension for android', () => {
+	jest.mock('react-native', () => ({ Platform: { OS: 'android' } }));
+	describe('with mime as image/jpeg', () => {
+		test('filename.jpg should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.jpg';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpg');
+		});
+		test('filename.png should be filename.png', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.png';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.png');
+		});
+		test('filename.jpeg should be filename.jpeg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.jpeg';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.jpeg');
+		});
+		test('filename.heic should be filename.heic', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.heic';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.heic');
+		});
+	});
+	describe('with mime different', () => {
+		test('filename.jpg should be filename.jpg', () => {
+			const newAttachment = attachment;
+			newAttachment.filename = 'filename.png';
+			newAttachment.mime = 'image/png';
+			const file = forceJpgExtension(newAttachment);
+
+			expect(file.filename).toBe('filename.png');
+		});
+	});
+});

app/containers/MessageBox/forceJpgExtension.ts

@@ -0,0 +1,13 @@
+import { ImageOrVideo } from 'react-native-image-crop-picker';
+
+import { isIOS } from '../../utils/deviceInfo';
+
+const regex = new RegExp(/\.[^/.]+$/); // Check from last '.' of the string
+
+export const forceJpgExtension = (attachment: ImageOrVideo): ImageOrVideo => {
+	if (isIOS && attachment.mime === 'image/jpeg' && attachment.filename) {
+		// Replace files extension that mime type is 'image/jpeg' to .jpg;
+		attachment.filename = attachment.filename.replace(regex, '.jpg');
+	}
+	return attachment;
+};

app/containers/MessageBox/index.tsx

@@ -27,7 +27,7 @@ import LeftButtons from './LeftButtons';
 // @ts-ignore
 // eslint-disable-next-line import/extensions,import/no-unresolved
 import RightButtons from './RightButtons';
-import { isAndroid, isIOS, isTablet } from '../../utils/deviceInfo';
+import { isAndroid, isTablet } from '../../utils/deviceInfo';
 import { canUploadFile } from '../../utils/media';
 import EventEmiter from '../../utils/events';
 import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands';
@@ -47,6 +47,7 @@ import Navigation from '../../lib/Navigation';
 import { withActionSheet } from '../ActionSheet';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import { CustomIcon } from '../../lib/Icons';
+import { forceJpgExtension } from './forceJpgExtension';
 
 if (isAndroid) {
 	require('./EmojiKeyboard');
@@ -130,18 +131,6 @@ interface IMessageBoxState {
 	permissionToUpload: boolean;
 }
 
-const forceJpgExtension = (attachment: ImageOrVideo) => {
-	if (isIOS && attachment.mime === 'image/jpeg' && attachment.filename) {
-		const regex = new RegExp(/.heic$/i);
-		if (attachment.filename.match(regex)) {
-			attachment.filename = attachment.filename.replace(regex, '.jpg');
-		} else {
-			attachment.filename += '.jpg';
-		}
-	}
-	return attachment;
-};
-
 class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	private text: string;