From a1c7ad7d7e16a8cb35f72411e598400cf8f4b616 Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Mon, 14 Mar 2022 01:19:55 +0530 Subject: [PATCH] fix: file mimeType related issues (#922) --- .../AttachedFilesButton.tsx | 2 +- .../AttachedFilesPopover.tsx | 1 + .../AttachedFilesPopover/PopoverFileItem.tsx | 44 +++---------------- .../PopoverFileSubmenu.tsx | 2 +- .../ui_models/app_state/files_state.ts | 2 +- package.json | 2 +- yarn.lock | 8 ++-- 7 files changed, 15 insertions(+), 46 deletions(-) diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx index fdd399048..4ec4a7b36 100644 --- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesButton.tsx +++ b/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, diff --git a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx index a6c0134a4..1515e5307 100644 --- a/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx +++ b/app/assets/javascripts/components/AttachedFilesPopover/AttachedFilesPopover.tsx @@ -169,6 +169,7 @@ export const AttachedFilesPopover: FunctionComponent = observer( file={file} isAttachedToNote={attachedFiles.includes(file)} handleFileAction={handleFileAction} + getIconType={application.iconsController.getIconForFileType} /> ); }) diff --git a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx index 96efc9923..eb86aae26 100644 --- a/app/assets/javascripts/components/AttachedFilesPopover/PopoverFileItem.tsx +++ b/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 ; + return ; }; export type PopoverFileItemProps = { file: SNFile; isAttachedToNote: boolean; handleFileAction: (action: PopoverFileItemAction) => Promise; + getIconType(type: string): IconType; }; export const PopoverFileItem: FunctionComponent = ({ file, isAttachedToNote, handleFileAction, + getIconType, }) => { const [fileName, setFileName] = useState(file.name); const [isRenamingFile, setIsRenamingFile] = useState(false); @@ -99,7 +67,7 @@ export const PopoverFileItem: FunctionComponent = ({ return (
- {getIconForFileType(file.name ?? '')} + {getFileIconComponent(getIconType(file.mimeType))}
{isRenamingFile ? ( & { +type Props = Omit & { setIsRenamingFile: StateUpdater; }; diff --git a/app/assets/javascripts/ui_models/app_state/files_state.ts b/app/assets/javascripts/ui_models/app_state/files_state.ts index c2cb9bd43..e6f69c076 100644 --- a/app/assets/javascripts/ui_models/app_state/files_state.ts +++ b/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); diff --git a/package.json b/package.json index 2c8c815a7..78aba3447 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index e4b5937e0..68aba0102 100644 --- a/yarn.lock +++ b/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"