fix: AAC audio type not playing on web (#32763)

apps/meteor/app/api/server/lib/getUploadFormData.ts

@@ -63,7 +63,7 @@ export async function getUploadFormData<
 	function onFile(
 		fieldname: string,
 		file: Readable & { truncated: boolean },
-		{ filename, encoding }: { filename: string; encoding: string },
+		{ filename, encoding, mimeType: mimetype }: { filename: string; encoding: string; mimeType: string },
 	) {
 		if (options.field && fieldname !== options.field) {
 			file.resume();
@@ -85,7 +85,7 @@ export async function getUploadFormData<
 				file,
 				filename,
 				encoding,
-				mimetype: getMimeType(filename),
+				mimetype: getMimeType(mimetype, filename),
 				fieldname,
 				fields,
 				fileBuffer: Buffer.concat(fileChunks),

apps/meteor/app/utils/lib/mimeTypes.spec.ts

@@ -0,0 +1,89 @@
+import { expect } from 'chai';
+
+import { getExtension, getMimeType } from './mimeTypes';
+
+const mimeTypeToExtension = {
+	'text/plain': 'txt',
+	'image/x-icon': 'ico',
+	'image/vnd.microsoft.icon': 'ico',
+	'image/png': 'png',
+	'image/jpeg': 'jpeg',
+	'image/gif': 'gif',
+	'image/webp': 'webp',
+	'image/svg+xml': 'svg',
+	'image/bmp': 'bmp',
+	'image/tiff': 'tif',
+	'audio/wav': 'wav',
+	'audio/wave': 'wav',
+	'audio/aac': 'aac',
+	'audio/x-aac': 'aac',
+	'audio/mp4': 'm4a',
+	'audio/mpeg': 'mpga',
+	'audio/ogg': 'oga',
+	'application/octet-stream': 'bin',
+};
+
+const extensionToMimeType = {
+	lst: 'text/plain',
+	txt: 'text/plain',
+	ico: 'image/x-icon',
+	png: 'image/png',
+	jpeg: 'image/jpeg',
+	gif: 'image/gif',
+	webp: 'image/webp',
+	svg: 'image/svg+xml',
+	bmp: 'image/bmp',
+	tiff: 'image/tiff',
+	tif: 'image/tiff',
+	wav: 'audio/wav',
+	aac: 'audio/aac',
+	mp3: 'audio/mpeg',
+	ogg: 'audio/ogg',
+	oga: 'audio/ogg',
+	m4a: 'audio/mp4',
+	mpga: 'audio/mpeg',
+	mp4: 'video/mp4',
+	bin: 'application/octet-stream',
+};
+
+describe('mimeTypes', () => {
+	describe('getExtension', () => {
+		for (const [mimeType, extension] of Object.entries(mimeTypeToExtension)) {
+			it(`should return the correct extension ${extension} for the given mimeType ${mimeType}`, async () => {
+				expect(getExtension(mimeType)).to.be.eql(extension);
+			});
+		}
+
+		it('should return an empty string if the mimeType is not found', async () => {
+			expect(getExtension('application/unknown')).to.be.eql('');
+		});
+	});
+
+	describe('getMimeType', () => {
+		for (const [extension, mimeType] of Object.entries(extensionToMimeType)) {
+			it(`should return the correct mimeType ${mimeType} for the given fileName file.${extension} passing the correct mimeType`, async () => {
+				expect(getMimeType(mimeType, `file.${extension}`)).to.be.eql(mimeType);
+			});
+		}
+
+		it('should return the correct mimeType for the given fileName', async () => {
+			for (const [extension, mimeType] of Object.entries(extensionToMimeType)) {
+				expect(getMimeType('application/unknown', `file.${extension}`)).to.be.eql(mimeType);
+			}
+		});
+
+		it('should return the correct mimeType for the given fileName when informed mimeType is application/octet-stream', async () => {
+			for (const [extension, mimeType] of Object.entries(extensionToMimeType)) {
+				expect(getMimeType('application/octet-stream', `file.${extension}`)).to.be.eql(mimeType);
+			}
+		});
+
+		it('should return the mimeType if it is not application/octet-stream', async () => {
+			expect(getMimeType('audio/wav', 'file.wav')).to.be.eql('audio/wav');
+		});
+
+		it('should return application/octet-stream if the mimeType is not found', async () => {
+			expect(getMimeType('application/octet-stream', 'file.unknown')).to.be.eql('application/octet-stream');
+		});
+	});
+});

apps/meteor/app/utils/lib/mimeTypes.ts

@@ -3,16 +3,23 @@ import mime from 'mime-type/with-db';
 mime.types.wav = 'audio/wav';
 mime.types.lst = 'text/plain';
 mime.define('image/vnd.microsoft.icon', { source: '', extensions: ['ico'] }, mime.dupAppend);
-mime.define('image/x-icon', { source: '', extensions: ['ico'] }, mime.dupAppend);
-mime.types.ico = 'image/x-icon';
+mime.define('image/x-icon', { source: '', extensions: ['ico'] }, mime.dupOverwrite);
+mime.define('audio/aac', { source: '', extensions: ['aac'] }, mime.dupOverwrite);
 
 const getExtension = (param: string): string => {
 	const extension = mime.extension(param);
 
 	return !extension || typeof extension === 'boolean' ? '' : extension;
 };
 
-const getMimeType = (fileName: string): string => {
+const getMimeType = (mimetype: string, fileName: string): string => {
+	// If the extension from the mimetype is different from the file extension, the file
+	// extension may be wrong so use the informed mimetype
+	const extension = mime.extension(mimetype);
+	if (mimetype !== 'application/octet-stream' && extension && extension !== fileName.split('.').pop()) {
+		return mimetype;
+	}
+
 	const fileMimeType = mime.lookup(fileName);
 	return typeof fileMimeType === 'string' ? fileMimeType : 'application/octet-stream';
 };

apps/meteor/client/views/room/body/hooks/useFileUploadDropTarget.ts

@@ -54,7 +54,7 @@ export const useFileUploadDropTarget = (): readonly [
 		const uniqueFiles = getUniqueFiles();
 
 		const uploads = Array.from(uniqueFiles).map((file) => {
-			Object.defineProperty(file, 'type', { value: getMimeType(file.name) });
+			Object.defineProperty(file, 'type', { value: getMimeType(file.type, file.name) });
 			return file;
 		});
 

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useFileUploadAction.ts

@@ -26,7 +26,7 @@ export const useFileUploadAction = (disabled: boolean): GenericMenuItemProps =>
 			const { getMimeType } = await import('../../../../../../../app/utils/lib/mimeTypes');
 			const filesToUpload = Array.from(fileInputRef?.current?.files ?? []).map((file) => {
 				Object.defineProperty(file, 'type', {
-					value: getMimeType(file.name),
+					value: getMimeType(file.type, file.name),
 				});
 				return file;
 			});

apps/meteor/jest.config.ts

@@ -34,6 +34,7 @@ const config: Config = {
 				'<rootDir>/app/livechat/server/api/**/*.spec.ts',
 				'<rootDir>/ee/app/authorization/server/validateUserRoles.spec.ts',
 				'<rootDir>/app/cloud/server/functions/supportedVersionsToken/**.spec.ts',
+				'<rootDir>/app/utils/lib/**.spec.ts',
 			],
 			transformIgnorePatterns: ['!/node_modules/jose'],
 			errorOnDeprecated: true,