fix: file mimeType related issues (#922)

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx

@@ -15,7 +15,7 @@ import { useCloseOnClickOutside } from '../utils';
 import { ChallengeReason, ContentType, SNFile } from '@standardnotes/snjs';
 import { confirmDialog } from '@/services/alertService';
 import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit';
-import { parseFileName, StreamingFileReader } from '@standardnotes/filepicker';
+import { StreamingFileReader } from '@standardnotes/filepicker';
 import {
   PopoverFileItemAction,
   PopoverFileItemActionType,

app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx

@@ -169,6 +169,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
                   file={file}
                   isAttachedToNote={attachedFiles.includes(file)}
                   handleFileAction={handleFileAction}
+                  getIconType={application.iconsController.getIconForFileType}
                 />
               );
             })

app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -1,6 +1,6 @@
 import { KeyboardKey } from '@/services/ioService';
 import { formatSizeToReadableString } from '@standardnotes/filepicker';
-import { SNFile } from '@standardnotes/snjs';
+import { IconType, SNFile } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { ICONS } from '../Icon';
@@ -10,56 +10,24 @@ import {
 } from './PopoverFileItemAction';
 import { PopoverFileSubmenu } from './PopoverFileSubmenu';
 
-const getIconForFileType = (fileType: string) => {
-  let iconType = 'file-other';
-
-  if (fileType === 'pdf') {
-    iconType = 'file-pdf';
-  }
-
-  if (/^(docx?|odt)/.test(fileType)) {
-    iconType = 'file-doc';
-  }
-
-  if (/^pptx?/.test(fileType)) {
-    iconType = 'file-ppt';
-  }
-
-  if (/^(xlsx?|ods)/.test(fileType)) {
-    iconType = 'file-xls';
-  }
-
-  if (/^(jpe?g|a?png|webp|gif)/.test(fileType)) {
-    iconType = 'file-image';
-  }
-
-  if (/^(mov|mp4|mkv)/.test(fileType)) {
-    iconType = 'file-mov';
-  }
-
-  if (/^(wav|mp3|flac|ogg)/.test(fileType)) {
-    iconType = 'file-music';
-  }
-
-  if (/^(zip|rar|7z)/.test(fileType)) {
-    iconType = 'file-zip';
-  }
-
+const getFileIconComponent = (iconType: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS];
 
-  return <IconComponent className="flex-shrink-0" />;
+  return <IconComponent className="w-8 h-8 flex-shrink-0" />;
 };
 
 export type PopoverFileItemProps = {
   file: SNFile;
   isAttachedToNote: boolean;
   handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>;
+  getIconType(type: string): IconType;
 };
 
 export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   file,
   isAttachedToNote,
   handleFileAction,
+  getIconType,
 }) => {
   const [fileName, setFileName] = useState(file.name);
   const [isRenamingFile, setIsRenamingFile] = useState(false);
@@ -99,7 +67,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   return (
     <div className="flex items-center justify-between p-3">
       <div className="flex items-center">
-        {getIconForFileType(file.name ?? '')}
+        {getFileIconComponent(getIconType(file.mimeType))}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (
             <input

app/assets/javascripts/components/AttachedFilesPopover/PopoverFileSubmenu.tsx

@@ -22,7 +22,7 @@ import { useCloseOnBlur } from '../utils';
 import { PopoverFileItemProps } from './PopoverFileItem';
 import { PopoverFileItemActionType } from './PopoverFileItemAction';
 
-type Props = Omit<PopoverFileItemProps, 'renameFile'> & {
+type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
   setIsRenamingFile: StateUpdater<boolean>;
 };
 

app/assets/javascripts/ui_models/app_state/files_state.ts

@@ -113,7 +113,7 @@ export class FilesState {
 
         const uploadedFile = await this.application.files.finishUpload(
           operation,
-          { name: fileResult.name, mimeType: '' }
+          { name: fileResult.name, mimeType: fileResult.mimeType }
         );
 
         uploadedFiles.push(uploadedFile);

package.json

@@ -84,7 +84,7 @@
     "@standardnotes/filepicker": "1.10.0",
     "@standardnotes/settings": "1.12.0",
     "@standardnotes/sncrypto-web": "1.7.3",
-    "@standardnotes/snjs": "2.81.1",
+    "@standardnotes/snjs": "2.82.0",
     "mobx": "^6.4.2",
     "mobx-react-lite": "^3.3.0",
     "preact": "^10.6.6",

yarn.lock

@@ -2401,10 +2401,10 @@
     buffer "^6.0.3"
     libsodium-wrappers "^0.7.9"
 
-"@standardnotes/snjs@2.81.1":
-  version "2.81.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.81.1.tgz#c6ac1970483743661d4d2227c6a8d1596d737bb7"
-  integrity sha512-Kc1FtkaUj1K8RuvZbwbsHdx0yrMzMYKVLf2aVKFJJXhMAKwVj9N4d2ZXOjr+1jlx4vc5Z5h76yeksOdKPO0NBA==
+"@standardnotes/snjs@2.82.0":
+  version "2.82.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/snjs/-/snjs-2.82.0.tgz#7901526ea59cf8f3cbad846d5b17b6f75ff1d13b"
+  integrity sha512-jqw4BoVMtBNZ2bEVs4g3AX1UWGMUjCkORWLmR6W6qhv7fDpwl+wrdMPEQRoYdJqTfrNxYTnX4ZGZ+FEwHlzuUw==
   dependencies:
     "@standardnotes/applications" "^1.1.3"
     "@standardnotes/auth" "^3.17.5"