Composer: Fix FLAC files sent as documents in Firefox (#7404)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

Author: Ajaxy

src/components/middle/composer/DropArea.tsx

@@ -7,6 +7,7 @@ import { canReplaceMessageMedia } from '../../../global/helpers';
 import { revokeAttachmentUrls } from '../../../util/attachments';
 import buildClassName from '../../../util/buildClassName';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
+import { validateFiles } from '../../../util/files';
 import buildAttachment from './helpers/buildAttachment';
 import getFilesFromDataTransferItems from './helpers/getFilesFromDataTransferItems';
 
@@ -49,7 +50,7 @@ const DropArea = ({
     let files: File[] = [];
 
     if (dt.files && dt.files.length > 0 && (!dt.items || !dt.items.length)) {
-      files = files.concat(Array.from(dt.files));
+      files = files.concat(validateFiles(dt.files) ?? []);
     } else if (dt.items && dt.items.length > 0) {
       const folderFiles = await getFilesFromDataTransferItems(dt.items);
       if (folderFiles?.length) {
@@ -67,8 +68,8 @@ const DropArea = ({
   const handleQuickFilesDrop = useLastCallback(async (e: React.DragEvent<HTMLDivElement>) => {
     const { dataTransfer: dt } = e;
 
-    if (dt.files && dt.files.length > 0) {
-      const files = Array.from(dt.files);
+    const files = validateFiles(dt.files);
+    if (files?.length) {
       if (!await validateReplacement(files)) return;
 
       onHide();

src/components/middle/composer/helpers/richEditor.ts

@@ -41,6 +41,7 @@ import type { RichEditorTooltipsConfig } from '../../../common/tooltips/types';
 import type { RichEditorMediaEditHandler, RichEditorMediaFilesHandler } from '../richEditorTypes';
 
 import { requestMutation } from '../../../../lib/fasterdom/fasterdom';
+import { validateFiles } from '../../../../util/files';
 import { CODE_HIGHLIGHTING_CHANGED_META, lowlight } from '../../../../util/highlightCode';
 import { addLocalizationCallback, getTranslationFn } from '../../../../util/localization';
 import {
@@ -599,8 +600,12 @@ function handleRichEditorDrop(
   getIsRichInputExpanded: () => boolean,
   onMediaFiles: RichEditorMediaFilesHandler,
 ) {
-  const files = Array.from(event.dataTransfer?.files || []);
-  if (!getIsRichInputExpanded() || !files.length) {
+  if (!event.dataTransfer || !getIsRichInputExpanded()) {
+    return false;
+  }
+
+  const files = validateFiles(event.dataTransfer.files);
+  if (!files?.length) {
     return false;
   }
 

src/components/middle/composer/richInput/EditableMedia.tsx

@@ -14,6 +14,7 @@ import type { RichEditorMediaEditHandler, RichEditorMediaFilesHandler } from '..
 import { getRichTextPlainText } from '../../../../global/helpers/richMessage';
 import { selectTheme } from '../../../../global/selectors';
 import buildClassName from '../../../../util/buildClassName';
+import { validateFiles } from '../../../../util/files';
 import { openSystemFilesDialog } from '../../../../util/systemFilesDialog';
 import { NodeViewContent, TeactNodeViewRenderer } from '../../../../util/tiptap';
 import { MEDIA_NODE_NAME } from '../../../../util/tiptap/constants';
@@ -165,8 +166,8 @@ const EditableMedia = ({
     if (typeof position !== 'number') return;
 
     openSystemFilesDialog(MEDIA_FILE_TYPES, (event) => {
-      const files = Array.from((event.target as HTMLInputElement).files || []);
-      if (files.length) {
+      const files = validateFiles((event.target as HTMLInputElement).files);
+      if (files?.length) {
         (extension.options.onMediaFiles as RichEditorMediaFilesHandler)(files, position, true);
       }
     });

src/util/files.ts

@@ -124,14 +124,21 @@ export function validateFiles(files: File[] | FileList | null): File[] | undefin
   if (!files?.length) {
     return undefined;
   }
-  return Array.from(files).map(fixMovMime).filter((file) => file.size);
+  return Array.from(files).map(fixMimeType).filter((file) => file.size);
 }
 
-// .mov MIME type not reported sometimes https://developer.mozilla.org/en-US/docs/Web/API/File/type#sect1
-function fixMovMime(file: File) {
-  const ext = file.name.split('.').pop()!;
-  if (!file.type && ext.toLowerCase() === 'mov') {
-    return new File([file], file.name, { type: 'video/quicktime' });
+const MIME_TYPE_BY_EXTENSION: Record<string, string> = {
+  mov: 'video/quicktime',
+  flac: 'audio/flac',
+};
+
+// Browsers may omit the type or take a non-standard one from the OS (e.g. Firefox reports `audio/x-flac` on Windows)
+// https://developer.mozilla.org/en-US/docs/Web/API/File/type#sect1
+function fixMimeType(file: File) {
+  const ext = file.name.split('.').pop()?.toLowerCase();
+  const expectedType = ext && MIME_TYPE_BY_EXTENSION[ext];
+  if (!expectedType || file.type === expectedType) {
+    return file;
   }
-  return file;
+  return new File([file], file.name, { type: expectedType });
 }