show import file type by categories

src/components/desktop/TwoColumnSelect.vue

@@ -1,5 +1,6 @@
 <template>
     <v-select
+        class="two-column-main-select"
         persistent-placeholder
         :density="density"
         :variant="variant"
@@ -19,7 +20,8 @@
                 <span class="text-truncate" v-if="!customSelectionPrimaryText && !selectedPrimaryItem && !selectedSecondaryItem">{{ noSelectionText }}</span>
                 <span class="text-truncate" v-if="!customSelectionPrimaryText && showSelectionPrimaryText && selectedPrimaryItem">{{ selectionPrimaryItemText }}</span>
                 <v-icon class="icon-with-direction disabled" :icon="mdiChevronRight" size="23" v-if="!customSelectionPrimaryText && showSelectionPrimaryText && selectedPrimaryItem && selectedSecondaryItem" />
-                <ItemIcon class="me-2" icon-type="account" size="21.5px"
+                <ItemIcon class="me-2" size="21.5px"
+                          :icon-type="secondaryIconType"
                           :icon-id="selectedSecondaryItem && secondaryIconField ? (selectedSecondaryItem as Record<string, unknown>)[secondaryIconField] : null"
                           :color="selectedSecondaryItem && secondaryColorField ? (selectedSecondaryItem as Record<string, unknown>)[secondaryColorField] : null"
                           v-if="!customSelectionPrimaryText && selectedSecondaryItem && showSelectionSecondaryIcon" />
@@ -48,7 +50,9 @@
                                      @click="onPrimaryItemClicked(item)">
                             <template #prepend>
                                 <ItemIcon class="me-2" :icon-type="primaryIconType"
-                                          :icon-id="primaryIconField ? (item as Record<string, unknown>)[primaryIconField] : undefined" :color="primaryColorField ? (item as Record<string, unknown>)[primaryColorField] : undefined"></ItemIcon>
+                                          :icon-id="primaryIconField ? (item as Record<string, unknown>)[primaryIconField] : undefined"
+                                          :color="primaryColorField ? (item as Record<string, unknown>)[primaryColorField] : undefined"
+                                          v-if="primaryIconField"></ItemIcon>
                             </template>
                             <template #title>
                                 <div class="list-item-header text-truncate" v-if="primaryHeaderField">{{ primaryHeaderField ? ti(item[primaryHeaderField] as string, !!primaryHeaderI18n) : '' }}</div>
@@ -67,7 +71,9 @@
                                      @click="onSecondaryItemClicked(subItem)">
                             <template #prepend>
                                 <ItemIcon class="me-2" :icon-type="secondaryIconType"
-                                          :icon-id="secondaryIconField ? subItem[secondaryIconField] : undefined" :color="secondaryColorField ? subItem[secondaryColorField] : undefined"></ItemIcon>
+                                          :icon-id="secondaryIconField ? subItem[secondaryIconField] : undefined"
+                                          :color="secondaryColorField ? subItem[secondaryColorField] : undefined"
+                                          v-if="secondaryIconField"></ItemIcon>
                             </template>
                             <template #title>
                                 <div class="list-item-header text-truncate" v-if="secondaryHeaderField">{{ secondaryHeaderField ? ti(subItem[secondaryHeaderField] as string, !!secondaryHeaderI18n) : '' }}</div>
@@ -113,6 +119,7 @@ interface DesktopTwoColumnListItemSelectionProps extends CommonTwoColumnListItem
     customSelectionPrimaryText?: string;
     customSelectionSecondaryText?: string;
     noItemText?: string;
+    autoUpdateMenuPosition?: boolean;
 }
 
 const props = defineProps<DesktopTwoColumnListItemSelectionProps>();
@@ -208,6 +215,23 @@ function isSecondarySelected(subItem: unknown): boolean {
 
 function onPrimaryItemClicked(item: unknown): void {
     updateCurrentPrimaryValue(currentPrimaryValue, item);
+
+    if (props.autoUpdateMenuPosition) {
+        nextTick(() => {
+            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const mainSelectRect = document.querySelector('.two-column-main-select')?.getBoundingClientRect();
+            const selectMenu = document.querySelector('.two-column-select-menu') as (HTMLElement | null);
+            const selectMenuRect = selectMenu?.getBoundingClientRect();
+
+            if (mainSelectRect && selectMenu && selectMenuRect) {
+                const newTop = scrollTop + mainSelectRect.top + mainSelectRect.height + 0.5;
+
+                if (newTop + selectMenuRect.height < document.documentElement.scrollHeight) {
+                    selectMenu.style.top = newTop + 'px';
+                }
+            }
+        });
+    }
 }
 
 function onSecondaryItemClicked(subItem: unknown): void {

src/consts/file.ts

@@ -1,4 +1,4 @@
-import type { ImportFileType } from '@/core/file.ts';
+import type { ImportFileCategoryAndTypes } from '@/core/file.ts';
 
 export const SUPPORTED_IMAGE_EXTENSIONS: string = '.jpg,.jpeg,.png,.gif,.webp';
 
@@ -62,203 +62,233 @@ export const SUPPORTED_FILE_ENCODINGS: string[] = [
     'shift_jis', // Japanese (Shift_JIS)
 ];
 
-export const SUPPORTED_IMPORT_FILE_TYPES: ImportFileType[] = [
+export const SUPPORTED_IMPORT_FILE_CATEGORY_AND_TYPES: ImportFileCategoryAndTypes[] = [
     {
-        type: 'ezbookkeeping',
+        categoryName: 'ezBookkeeping File Format',
-        name: 'ezbookkeeping Data Export File',
+        fileTypes: [
-        extensions: '.csv,.tsv',
-        subTypes: [
             {
-                type: 'ezbookkeeping_csv',
+                type: 'ezbookkeeping',
-                name: 'CSV (Comma-separated values) File',
+                name: 'ezbookkeeping Data Export File',
-                extensions: '.csv',
+                extensions: '.csv,.tsv',
-            },
+                subTypes: [
-            {
+                    {
-                type: 'ezbookkeeping_tsv',
+                        type: 'ezbookkeeping_csv',
-                name: 'TSV (Tab-separated values) File',
+                        name: 'CSV (Comma-separated values) File',
-                extensions: '.tsv',
+                        extensions: '.csv',
-            }
+                    },
-        ],
+                    {
-        document: {
+                        type: 'ezbookkeeping_tsv',
-            supportMultiLanguages: true,
+                        name: 'TSV (Tab-separated values) File',
-            anchor: 'export-transactions'
+                        extensions: '.tsv',
-        }
+                    }
-    },
+                ],
-    {
+                document: {
-        type: 'dsv',
+                    supportMultiLanguages: true,
-        name: 'Delimiter-separated Values (DSV) File',
+                    anchor: 'export-transactions'
-        extensions: '.csv,.tsv',
+                }
-        subTypes: [
-            {
-                type: 'custom_csv',
-                name: 'CSV (Comma-separated values) File',
-                extensions: '.csv',
-            },
-            {
-                type: 'custom_tsv',
-                name: 'TSV (Tab-separated values) File',
-                extensions: '.tsv,.txt',
-            }
-        ],
-        supportedEncodings: SUPPORTED_FILE_ENCODINGS,
-        document: {
-            supportMultiLanguages: true,
-            anchor: 'how-to-import-delimiter-separated-values-dsv-file-or-data'
-        }
-    },
-    {
-        type: 'dsv_data',
-        name: 'Delimiter-separated Values (DSV) Data',
-        extensions: '.csv,.tsv',
-        subTypes: [
-            {
-                type: 'custom_csv',
-                name: 'CSV (Comma-separated values) File',
-                extensions: '.csv',
-            },
-            {
-                type: 'custom_tsv',
-                name: 'TSV (Tab-separated values) File',
-                extensions: '.tsv,.txt',
-            }
-        ],
-        dataFromTextbox: true,
-        document: {
-            supportMultiLanguages: true,
-            anchor: 'how-to-import-delimiter-separated-values-dsv-file-or-data'
-        }
-    },
-    {
-        type: 'ofx',
-        name: 'Open Financial Exchange (OFX) File',
-        extensions: '.ofx'
-    },
-    {
-        type: 'qfx',
-        name: 'Quicken Financial Exchange (QFX) File',
-        extensions: '.qfx'
-    },
-    {
-        type: 'qif',
-        name: 'Quicken Interchange Format (QIF) File',
-        extensions: '.qif',
-        subTypes: [
-            {
-                type: 'qif_ymd',
-                name: 'Year-month-day format',
-            },
-            {
-                type: 'qif_mdy',
-                name: 'Month-day-year format',
-            },
-            {
-                type: 'qif_dmy',
-                name: 'Day-month-year format',
             }
         ]
     },
     {
-        type: 'iif',
+        categoryName: 'Custom File Format',
-        name: 'Intuit Interchange Format (IIF) File',
+        fileTypes: [
-        extensions: '.iif'
-    },
-    {
-        type: 'camt053',
-        name: 'Camt.053 Bank to Customer Statement File',
-        extensions: '.xml'
-    },
-    {
-        type: 'mt940',
-        name: 'MT940 Consumer Statement Message File',
-        extensions: '.txt'
-    },
-    {
-        type: 'gnucash',
-        name: 'GnuCash XML Database File',
-        extensions: '.gnucash',
-        document: {
-            supportMultiLanguages: true,
-            anchor: 'how-to-get-gnucash-xml-database-file'
-        }
-    },
-    {
-        type: 'firefly_iii_csv',
-        name: 'Firefly III Data Export File',
-        extensions: '.csv',
-        document: {
-            supportMultiLanguages: true,
-            anchor: 'how-to-get-firefly-iii-data-export-file'
-        }
-    },
-    {
-        type: 'beancount',
-        name: 'Beancount Data File',
-        extensions: '.beancount'
-    },
-    {
-        type: 'feidee_mymoney_csv',
-        name: 'Feidee MyMoney (App) Data Export File',
-        extensions: '.csv',
-        document: {
-            supportMultiLanguages: 'zh-Hans',
-            anchor: '如何获取随手记app数据导出文件'
-        }
-    },
-    {
-        type: 'feidee_mymoney_xls',
-        name: 'Feidee MyMoney (Web) Data Export File',
-        extensions: '.xls',
-        document: {
-            supportMultiLanguages: 'zh-Hans',
-            anchor: '如何获取随手记web版数据导出文件'
-        }
-    },
-    {
-        type: 'feidee_mymoney_elecloud_xlsx',
-        name: 'Feidee MyMoney (Elecloud) Data Export File',
-        extensions: '.xlsx',
-        document: {
-            supportMultiLanguages: 'zh-Hans',
-            anchor: '如何获取随手记神象云账本数据导出文件'
-        }
-    },
-    {
-        type: 'alipay_app_csv',
-        name: 'Alipay (App) Transaction Flow File',
-        extensions: '.csv',
-        document: {
-            supportMultiLanguages: 'zh-Hans',
-            anchor: '如何获取支付宝app交易流水文件'
-        }
-    },
-    {
-        type: 'alipay_web_csv',
-        name: 'Alipay (Web) Transaction Flow File',
-        extensions: '.csv',
-        document: {
-            supportMultiLanguages: 'zh-Hans',
-            anchor: '如何获取支付宝网页版交易流水文件'
-        }
-    },
-    {
-        type: 'wechat_pay_app',
-        name: 'WeChat Pay Billing File',
-        extensions: '.xlsx,.csv',
-        subTypes: [
             {
-                type: 'wechat_pay_app_xlsx',
+                type: 'dsv',
-                name: 'Excel Workbook File',
+                name: 'Delimiter-separated Values (DSV) File',
-                extensions: '.xlsx',
+                extensions: '.csv,.tsv',
+                subTypes: [
+                    {
+                        type: 'custom_csv',
+                        name: 'CSV (Comma-separated values) File',
+                        extensions: '.csv',
+                    },
+                    {
+                        type: 'custom_tsv',
+                        name: 'TSV (Tab-separated values) File',
+                        extensions: '.tsv,.txt',
+                    }
+                ],
+                supportedEncodings: SUPPORTED_FILE_ENCODINGS,
+                document: {
+                    supportMultiLanguages: true,
+                    anchor: 'how-to-import-delimiter-separated-values-dsv-file-or-data'
+                }
             },
             {
-                type: 'wechat_pay_app_csv',
+                type: 'dsv_data',
-                name: 'CSV (Comma-separated values) File',
+                name: 'Delimiter-separated Values (DSV) Data',
-                extensions: '.csv',
+                extensions: '.csv,.tsv',
+                subTypes: [
+                    {
+                        type: 'custom_csv',
+                        name: 'CSV (Comma-separated values) File',
+                        extensions: '.csv',
+                    },
+                    {
+                        type: 'custom_tsv',
+                        name: 'TSV (Tab-separated values) File',
+                        extensions: '.tsv,.txt',
+                    }
+                ],
+                dataFromTextbox: true,
+                document: {
+                    supportMultiLanguages: true,
+                    anchor: 'how-to-import-delimiter-separated-values-dsv-file-or-data'
+                }
             }
-        ],
+        ]
-        document: {
+    },
-            supportMultiLanguages: 'zh-Hans',
+    {
-            anchor: '如何获取微信支付账单文件'
+        categoryName: 'General Data Exchange Format',
-        }
+        fileTypes: [
+            {
+                type: 'ofx',
+                name: 'Open Financial Exchange (OFX) File',
+                extensions: '.ofx'
+            },
+            {
+                type: 'qfx',
+                name: 'Quicken Financial Exchange (QFX) File',
+                extensions: '.qfx'
+            },
+            {
+                type: 'qif',
+                name: 'Quicken Interchange Format (QIF) File',
+                extensions: '.qif',
+                subTypes: [
+                    {
+                        type: 'qif_ymd',
+                        name: 'Year-month-day format',
+                    },
+                    {
+                        type: 'qif_mdy',
+                        name: 'Month-day-year format',
+                    },
+                    {
+                        type: 'qif_dmy',
+                        name: 'Day-month-year format',
+                    }
+                ]
+            },
+            {
+                type: 'iif',
+                name: 'Intuit Interchange Format (IIF) File',
+                extensions: '.iif'
+            }
+        ]
+    },
+    {
+        categoryName: 'General Bank Statement Format',
+        fileTypes: [
+            {
+                type: 'camt053',
+                name: 'Camt.053 Bank to Customer Statement File',
+                extensions: '.xml'
+            },
+            {
+                type: 'mt940',
+                name: 'MT940 Consumer Statement Message File',
+                extensions: '.txt'
+            }
+        ]
+    },
+    {
+        categoryName: 'Other Bank/Payment App Statement File',
+        fileTypes: [
+            {
+                type: 'alipay_app_csv',
+                name: 'Alipay (App) Transaction Flow File',
+                extensions: '.csv',
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取支付宝app交易流水文件'
+                }
+            },
+            {
+                type: 'alipay_web_csv',
+                name: 'Alipay (Web) Transaction Flow File',
+                extensions: '.csv',
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取支付宝网页版交易流水文件'
+                }
+            },
+            {
+                type: 'wechat_pay_app',
+                name: 'WeChat Pay Billing File',
+                extensions: '.xlsx,.csv',
+                subTypes: [
+                    {
+                        type: 'wechat_pay_app_xlsx',
+                        name: 'Excel Workbook File',
+                        extensions: '.xlsx',
+                    },
+                    {
+                        type: 'wechat_pay_app_csv',
+                        name: 'CSV (Comma-separated values) File',
+                        extensions: '.csv',
+                    }
+                ],
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取微信支付账单文件'
+                }
+            }
+        ]
+    },
+    {
+        categoryName: 'Other Finance App File Format',
+        fileTypes: [
+            {
+                type: 'gnucash',
+                name: 'GnuCash XML Database File',
+                extensions: '.gnucash',
+                document: {
+                    supportMultiLanguages: true,
+                    anchor: 'how-to-get-gnucash-xml-database-file'
+                }
+            },
+            {
+                type: 'firefly_iii_csv',
+                name: 'Firefly III Data Export File',
+                extensions: '.csv',
+                document: {
+                    supportMultiLanguages: true,
+                    anchor: 'how-to-get-firefly-iii-data-export-file'
+                }
+            },
+            {
+                type: 'beancount',
+                name: 'Beancount Data File',
+                extensions: '.beancount'
+            },
+            {
+                type: 'feidee_mymoney_csv',
+                name: 'Feidee MyMoney (App) Data Export File',
+                extensions: '.csv',
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取随手记app数据导出文件'
+                }
+            },
+            {
+                type: 'feidee_mymoney_xls',
+                name: 'Feidee MyMoney (Web) Data Export File',
+                extensions: '.xls',
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取随手记web版数据导出文件'
+                }
+            },
+            {
+                type: 'feidee_mymoney_elecloud_xlsx',
+                name: 'Feidee MyMoney (Elecloud) Data Export File',
+                extensions: '.xlsx',
+                document: {
+                    supportMultiLanguages: 'zh-Hans',
+                    anchor: '如何获取随手记神象云账本数据导出文件'
+                }
+            }
+        ]
     }
 ];

src/core/file.ts

@@ -40,6 +40,11 @@ export interface ImportFileTypeAndExtensions {
     readonly extensions?: string;
 }
 
+export interface ImportFileCategoryAndTypes {
+    readonly categoryName: string;
+    readonly fileTypes: ImportFileType[];
+}
+
 export interface ImportFileType extends ImportFileTypeAndExtensions {
     readonly type: string;
     readonly name: string;
@@ -59,6 +64,11 @@ export interface ImportFileTypeSubType extends ImportFileTypeAndExtensions {
     readonly extensions?: string;
 }
 
+export interface LocalizedImportFileCategoryAndTypes {
+    readonly displayCategoryName: string;
+    readonly fileTypes: LocalizedImportFileType[];
+}
+
 export interface LocalizedImportFileType extends ImportFileTypeAndExtensions {
     readonly type: string;
     readonly displayName: string;

src/locales/de.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Überprüfen und Ändern Sie Ihre Daten",
     "Data Import Completed": "Datenimport abgeschlossen",
     "File Type": "Dateityp",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Filterbeschreibung",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "Wie exportiere ich diese Datei?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "ezBookkeeping-Datenexportdatei",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Open Financial Exchange (OFX)-Datei",

src/locales/en.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Check and Modify Your Data",
     "Data Import Completed": "Data Import Completed",
     "File Type": "File Type",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Filter Description",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "How to export this file?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "ezbookkeeping Data Export File",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Open Financial Exchange (OFX) File",

src/locales/es.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Verifique y modifique sus datos",
     "Data Import Completed": "Importación de datos completada",
     "File Type": "Tipo de archivo",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Descripción del filtro",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "¿Cómo exportar este archivo?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "Archivo de exportación de datos de ezBookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Abrir archivo de intercambio financiero (OFX)",

src/locales/helpers.ts

@@ -113,10 +113,11 @@ import {
 } from '@/core/statistics.ts';
 
 import {
+    type LocalizedImportFileCategoryAndTypes,
     type LocalizedImportFileType,
     type LocalizedImportFileTypeSubType,
     type LocalizedImportFileTypeSupportedEncodings,
-    type LocalizedImportFileDocument,
+    type LocalizedImportFileDocument
 } from '@/core/file.ts';
 
 import type { LocaleDefaultSettings } from '@/core/setting.ts';
@@ -127,7 +128,7 @@ import { UTC_TIMEZONE, ALL_TIMEZONES } from '@/consts/timezone.ts';
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
 import { DEFAULT_EXPENSE_CATEGORIES, DEFAULT_INCOME_CATEGORIES, DEFAULT_TRANSFER_CATEGORIES } from '@/consts/category.ts';
 import { KnownErrorCode, SPECIFIED_API_NOT_FOUND_ERRORS, PARAMETERIZED_ERRORS } from '@/consts/api.ts';
-import { DEFAULT_DOCUMENT_LANGUAGE_FOR_IMPORT_FILE, SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE, SUPPORTED_IMPORT_FILE_TYPES } from '@/consts/file.ts';
+import { DEFAULT_DOCUMENT_LANGUAGE_FOR_IMPORT_FILE, SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE, SUPPORTED_IMPORT_FILE_CATEGORY_AND_TYPES } from '@/consts/file.ts';
 
 import {
     type CategorizedAccount,
@@ -1305,102 +1306,114 @@ export function useI18n() {
         return availableExchangeRates;
     }
 
-    function getAllSupportedImportFileTypes(): LocalizedImportFileType[] {
+    function getAllSupportedImportFileCagtegoryAndTypes(): LocalizedImportFileCategoryAndTypes[] {
-        const allSupportedImportFileTypes: LocalizedImportFileType[] = [];
+        const allSupportedImportFileCategoryAndTypes: LocalizedImportFileCategoryAndTypes[] = [];
 
-        for (let i = 0; i < SUPPORTED_IMPORT_FILE_TYPES.length; i++) {
+        for (let i = 0; i < SUPPORTED_IMPORT_FILE_CATEGORY_AND_TYPES.length; i++) {
-            const fileType = SUPPORTED_IMPORT_FILE_TYPES[i];
+            const categoryAndTypes = SUPPORTED_IMPORT_FILE_CATEGORY_AND_TYPES[i];
-            let document: LocalizedImportFileDocument | undefined;
 
-            if (fileType.document) {
+            const localizedCategoryAndTypes: LocalizedImportFileCategoryAndTypes = {
-                let documentLanguage = '';
+                displayCategoryName: t(categoryAndTypes.categoryName),
-                let documentDisplayLanguageName = '';
+                fileTypes: []
-                let documentAnchor = '';
-
-                if (fileType.document.supportMultiLanguages === true) {
-                    documentLanguage = getCurrentLanguageTag();
-
-                    if (SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage] === documentLanguage) {
-                        documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`);
-                    } else if (SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage]) {
-                        documentLanguage = SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage];
-                        documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`, {}, { locale: documentLanguage });
-                    } else {
-                        documentLanguage = DEFAULT_DOCUMENT_LANGUAGE_FOR_IMPORT_FILE;
-                        documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`, {}, { locale: documentLanguage });
-                    }
-                } else if (isString(fileType.document.supportMultiLanguages) && ALL_LANGUAGES[fileType.document.supportMultiLanguages]) {
-                    documentLanguage = fileType.document.supportMultiLanguages;
-                    documentAnchor = fileType.document.anchor;
-                }
-
-                if (documentLanguage && documentLanguage !== getCurrentLanguageTag()) {
-                    documentDisplayLanguageName = getLanguageDisplayName(ALL_LANGUAGES[documentLanguage].name);
-                }
-
-                if (documentLanguage) {
-                    documentLanguage = documentLanguage.replace(/-/g, '_');
-                }
-
-                if (documentAnchor) {
-                    documentAnchor = documentAnchor.toLowerCase().replace(/ /g, '-');
-                }
-
-                if (documentLanguage === DEFAULT_LANGUAGE) {
-                    documentLanguage = '';
-                }
-
-                document = {
-                    language: documentLanguage,
-                    displayLanguageName: documentDisplayLanguageName,
-                    anchor: documentAnchor
-                };
-            } else {
-                document = undefined;
-            }
-
-            const subTypes: LocalizedImportFileTypeSubType[] = [];
-
-            if (fileType.subTypes) {
-                for (let i = 0; i < fileType.subTypes.length; i++) {
-                    const subType = fileType.subTypes[i];
-                    const localizedSubType: LocalizedImportFileTypeSubType = {
-                        type: subType.type,
-                        displayName: t(subType.name),
-                        extensions: subType.extensions
-                    };
-
-                    subTypes.push(localizedSubType);
-                }
-            }
-
-            const supportedEncodings: LocalizedImportFileTypeSupportedEncodings[] = [];
-
-            if (fileType.supportedEncodings) {
-                for (let i = 0; i < fileType.supportedEncodings.length; i++) {
-                    const encoding = fileType.supportedEncodings[i];
-                    const localizedEncoding: LocalizedImportFileTypeSupportedEncodings = {
-                        encoding: encoding,
-                        displayName: t(`encoding.${encoding}`)
-                    };
-
-                    supportedEncodings.push(localizedEncoding);
-                }
-            }
-
-            const localizedFileType: LocalizedImportFileType = {
-                type: fileType.type,
-                displayName: t(fileType.name),
-                extensions: fileType.extensions,
-                subTypes: subTypes.length ? subTypes : undefined,
-                supportedEncodings: supportedEncodings.length ? supportedEncodings : undefined,
-                dataFromTextbox: fileType.dataFromTextbox,
-                document: document
             };
-            allSupportedImportFileTypes.push(localizedFileType);
+
+            for (let j = 0; j < categoryAndTypes.fileTypes.length; j++) {
+                const fileType = categoryAndTypes.fileTypes[j];
+                let document: LocalizedImportFileDocument | undefined;
+
+                if (fileType.document) {
+                    let documentLanguage = '';
+                    let documentDisplayLanguageName = '';
+                    let documentAnchor = '';
+
+                    if (fileType.document.supportMultiLanguages === true) {
+                        documentLanguage = getCurrentLanguageTag();
+
+                        if (SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage] === documentLanguage) {
+                            documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`);
+                        } else if (SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage]) {
+                            documentLanguage = SUPPORTED_DOCUMENT_LANGUAGES_FOR_IMPORT_FILE[documentLanguage];
+                            documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`, {}, { locale: documentLanguage });
+                        } else {
+                            documentLanguage = DEFAULT_DOCUMENT_LANGUAGE_FOR_IMPORT_FILE;
+                            documentAnchor = t(`document.anchor.export_and_import.${fileType.document.anchor}`, {}, { locale: documentLanguage });
+                        }
+                    } else if (isString(fileType.document.supportMultiLanguages) && ALL_LANGUAGES[fileType.document.supportMultiLanguages]) {
+                        documentLanguage = fileType.document.supportMultiLanguages;
+                        documentAnchor = fileType.document.anchor;
+                    }
+
+                    if (documentLanguage && documentLanguage !== getCurrentLanguageTag()) {
+                        documentDisplayLanguageName = getLanguageDisplayName(ALL_LANGUAGES[documentLanguage].name);
+                    }
+
+                    if (documentLanguage) {
+                        documentLanguage = documentLanguage.replace(/-/g, '_');
+                    }
+
+                    if (documentAnchor) {
+                        documentAnchor = documentAnchor.toLowerCase().replace(/ /g, '-');
+                    }
+
+                    if (documentLanguage === DEFAULT_LANGUAGE) {
+                        documentLanguage = '';
+                    }
+
+                    document = {
+                        language: documentLanguage,
+                        displayLanguageName: documentDisplayLanguageName,
+                        anchor: documentAnchor
+                    };
+                } else {
+                    document = undefined;
+                }
+
+                const subTypes: LocalizedImportFileTypeSubType[] = [];
+
+                if (fileType.subTypes) {
+                    for (let k = 0; k < fileType.subTypes.length; k++) {
+                        const subType = fileType.subTypes[k];
+                        const localizedSubType: LocalizedImportFileTypeSubType = {
+                            type: subType.type,
+                            displayName: t(subType.name),
+                            extensions: subType.extensions
+                        };
+
+                        subTypes.push(localizedSubType);
+                    }
+                }
+
+                const supportedEncodings: LocalizedImportFileTypeSupportedEncodings[] = [];
+
+                if (fileType.supportedEncodings) {
+                    for (let k = 0; k < fileType.supportedEncodings.length; k++) {
+                        const encoding = fileType.supportedEncodings[k];
+                        const localizedEncoding: LocalizedImportFileTypeSupportedEncodings = {
+                            encoding: encoding,
+                            displayName: t(`encoding.${encoding}`)
+                        };
+
+                        supportedEncodings.push(localizedEncoding);
+                    }
+                }
+
+                const localizedFileType: LocalizedImportFileType = {
+                    type: fileType.type,
+                    displayName: t(fileType.name),
+                    extensions: fileType.extensions,
+                    subTypes: subTypes.length ? subTypes : undefined,
+                    supportedEncodings: supportedEncodings.length ? supportedEncodings : undefined,
+                    dataFromTextbox: fileType.dataFromTextbox,
+                    document: document
+                };
+
+                localizedCategoryAndTypes.fileTypes.push(localizedFileType);
+            }
+
+            allSupportedImportFileCategoryAndTypes.push(localizedCategoryAndTypes);
         }
 
-        return allSupportedImportFileTypes;
+        return allSupportedImportFileCategoryAndTypes;
     }
 
     function getLanguageInfo(languageKey: string): LanguageInfo | undefined {
@@ -2110,7 +2123,7 @@ export function useI18n() {
         getAllImportTransactionColumnTypes: () => getLocalizedDisplayNameAndType(ImportTransactionColumnType.values()),
         getAllTransactionDefaultCategories,
         getAllDisplayExchangeRates,
-        getAllSupportedImportFileTypes,
+        getAllSupportedImportFileCagtegoryAndTypes,
         // get localized info
         getLanguageInfo,
         getMonthShortName,

src/locales/it.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Controlla e modifica i tuoi dati",
     "Data Import Completed": "Importazione dati completata",
     "File Type": "Tipo di file",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Filtra descrizione",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "Come esportare questo file?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "File esportazione dati ezBookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "File Open Financial Exchange (OFX)",

src/locales/ja.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "データの確認と修正をします",
     "Data Import Completed": "データのインポートが完了しました",
     "File Type": "ファイルの種類",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "フィルターの説明",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "このファイルをエクスポートする方法",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "ezbookkeepingデータエクスポートファイル",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Open Financial Exchange (OFX) ファイル",

src/locales/nl.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Controleer en pas je gegevens aan",
     "Data Import Completed": "Gegevensimport voltooid",
     "File Type": "Bestandstype",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Filterbeschrijving",
     "How to import this file?": "Hoe importeer ik dit bestand?",
     "How to export this file?": "Hoe exporteer ik dit bestand?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "ezBookkeeping-gegevensexportbestand",
     "Excel Workbook File": "Excel-werkmap",
     "Open Financial Exchange (OFX) File": "Open Financial Exchange (OFX)-bestand",

src/locales/pt_BR.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Verificar e Modificar Seus Dados",
     "Data Import Completed": "Importação de Dados Concluída",
     "File Type": "Tipo de Arquivo",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Descrição do Filtro",
     "How to import this file?": "Como importar este arquivo?",
     "How to export this file?": "Como exportar este arquivo?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "Arquivo de Exportação de Dados ezbookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Arquivo Open Financial Exchange (OFX)",

src/locales/ru.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Проверьте и измените свои данные",
     "Data Import Completed": "Импорт данных завершен",
     "File Type": "Тип файла",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Описание фильтра",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "Как экспортировать этот файл?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "Файл экспорта данных ezbookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Файл Open Financial Exchange (OFX)",

src/locales/uk.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Перевірте та змініть свої дані",
     "Data Import Completed": "Імпорт даних завершено",
     "File Type": "Тип файлу",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Опис фільтра",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "Як експортувати цей файл?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "Файл експорту даних ezbookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Файл Open Financial Exchange (OFX)",

src/locales/vi.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "Kiểm tra và sửa đổi dữ liệu của bạn",
     "Data Import Completed": "Nhập dữ liệu hoàn tất",
     "File Type": "Loại tệp",
+    "Find file type": "Find file type",
+    "No available file type": "No available file type",
     "Filter Description": "Mô tả bộ lọc",
     "How to import this file?": "How to import this file?",
     "How to export this file?": "Làm thế nào để xuất tệp này?",
+    "ezBookkeeping File Format": "ezBookkeeping File Format",
+    "Custom File Format": "Custom File Format",
+    "General Data Exchange Format": "General Data Exchange Format",
+    "General Bank Statement Format": "General Bank Statement Format",
+    "Other Bank/Payment App Statement File": "Other Bank/Payment App Statement File",
+    "Other Finance App File Format": "Other Finance App File Format",
     "ezbookkeeping Data Export File": "Tệp xuất dữ liệu ezbookkeeping",
     "Excel Workbook File": "Excel Workbook File",
     "Open Financial Exchange (OFX) File": "Tệp Open Financial Exchange (OFX)",

src/locales/zh_Hans.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "检查及修改您的数据",
     "Data Import Completed": "数据导入完成",
     "File Type": "文件类型",
+    "Find file type": "查找文件类型",
+    "No available file type": "没有可用的文件类型",
     "Filter Description": "过滤描述",
     "How to import this file?": "如何导入该文件？",
     "How to export this file?": "如何导出该文件？",
+    "ezBookkeeping File Format": "ezBookkeeping 文件格式",
+    "Custom File Format": "自定义文件格式",
+    "General Data Exchange Format": "通用数据交换格式",
+    "General Bank Statement Format": "通用银行对账单格式",
+    "Other Bank/Payment App Statement File": "其他银行/支付应用对账单文件",
+    "Other Finance App File Format": "其他金融应用文件格式",
     "ezbookkeeping Data Export File": "ezbookkeeping 数据导出文件",
     "Excel Workbook File": "Excel 工作簿文件",
     "Open Financial Exchange (OFX) File": "开放式金融交换 (OFX) 文件",

src/locales/zh_Hant.json

@@ -1727,9 +1727,17 @@
     "Check and Modify Your Data": "檢查及修改您的資料",
     "Data Import Completed": "資料匯入完成",
     "File Type": "檔案類型",
+    "Find file type": "搜尋檔案類型",
+    "No available file type": "沒有可用的檔案類型",
     "Filter Description": "篩選描述",
     "How to import this file?": "如何匯入此檔案？",
     "How to export this file?": "如何匯出此檔案？",
+    "ezBookkeeping File Format": "ezBookkeeping 檔案格式",
+    "Custom File Format": "自訂檔案格式",
+    "General Data Exchange Format": "通用資料交換格式",
+    "General Bank Statement Format": "通用銀行對帳單格式",
+    "Other Bank/Payment App Statement File": "其他銀行/支付應用程式對帳單檔案",
+    "Other Finance App File Format": "其他金融應用程式檔案格式",
     "ezbookkeeping Data Export File": "ezbookkeeping 資料匯出檔案",
     "Excel Workbook File": "Excel 工作簿檔案",
     "Open Financial Exchange (OFX) File": "開放式金融交換 (OFX) 檔案",

src/views/desktop/transactions/import/ImportDialog.vue

@@ -218,15 +218,23 @@
                 <v-window-item value="uploadFile">
                     <v-row>
                         <v-col cols="12" md="12">
-                            <v-select
+                            <two-column-select primary-key-field="displayCategoryName"
-                                item-title="displayName"
+                                               primary-value-field="displayCategoryName"
-                                item-value="type"
+                                               primary-title-field="displayCategoryName"
-                                :disabled="submitting"
+                                               primary-sub-items-field="fileTypes"
-                                :label="tt('File Type')"
+                                               secondary-key-field="type"
-                                :placeholder="tt('File Type')"
+                                               secondary-value-field="type"
-                                :items="allSupportedImportFileTypes"
+                                               secondary-title-field="displayName"
-                                v-model="fileType"
+                                               :disabled="submitting"
-                            />
+                                               :enable-filter="true"
+                                               :filter-placeholder="tt('Find file type')"
+                                               :filter-no-items-text="tt('No available file type')"
+                                               :label="tt('File Type')"
+                                               :placeholder="tt('File Type')"
+                                               :items="allSupportedImportFileCategoryAndTypes"
+                                               :auto-update-menu-position="true"
+                                               v-model="fileType">
+                            </two-column-select>
                         </v-col>
 
                         <v-col cols="12" md="12" v-if="allFileSubTypes">
@@ -907,7 +915,7 @@ import { TransactionType } from '@/core/transaction.ts';
 import { ImportTransactionColumnType, ImportTransactionDataMapping } from '@/core/import_transaction.ts';
 import { KnownFileType } from '@/core/file.ts';
 
-import type { LocalizedImportFileType, LocalizedImportFileTypeSubType, LocalizedImportFileTypeSupportedEncodings } from '@/core/file.ts';
+import type { LocalizedImportFileCategoryAndTypes, LocalizedImportFileType, LocalizedImportFileTypeSubType, LocalizedImportFileTypeSupportedEncodings } from '@/core/file.ts';
 import { Account, type CategorizedAccountWithDisplayBalance } from '@/models/account.ts';
 import type { TransactionCategory } from '@/models/transaction_category.ts';
 import type { TransactionTag } from '@/models/transaction_tag.ts';
@@ -998,7 +1006,7 @@ defineProps<{
 const {
     tt,
     getAllImportTransactionColumnTypes,
-    getAllSupportedImportFileTypes,
+    getAllSupportedImportFileCagtegoryAndTypes,
     formatUnixTimeToLongDateTime,
     formatAmountToLocalizedNumeralsWithCurrency,
     formatNumberToLocalizedNumerals,
@@ -1097,7 +1105,22 @@ const allSteps = computed<StepBarItem[]>(() => {
 });
 
 const allImportTransactionColumnTypes = computed<TypeAndDisplayName[]>(() => getAllImportTransactionColumnTypes());
-const allSupportedImportFileTypes = computed<LocalizedImportFileType[]>(() => getAllSupportedImportFileTypes());
+const allSupportedImportFileCategoryAndTypes = computed<LocalizedImportFileCategoryAndTypes[]>(() => getAllSupportedImportFileCagtegoryAndTypes());
+
+const allSupportedImportFileTypesMap = computed<Record<string, LocalizedImportFileType>>(() => {
+    const ret: Record<string, LocalizedImportFileType> = {};
+
+    for (let i = 0; i < allSupportedImportFileCategoryAndTypes.value.length; i++) {
+        const importFileCategoryAndTypes = allSupportedImportFileCategoryAndTypes.value[i];
+
+        for (let j = 0; j < importFileCategoryAndTypes.fileTypes.length; j++) {
+            const importFileType = importFileCategoryAndTypes.fileTypes[j];
+            ret[importFileType.type] = importFileType;
+        }
+    }
+
+    return ret;
+});
 
 const allSeparators = computed<NameValue[]>(() => {
     const separators: NameValue[] = [
@@ -1126,35 +1149,9 @@ const allSeparators = computed<NameValue[]>(() => {
     return separators;
 });
 
-const isImportDataFromTextbox = computed<boolean>(() => {
+const isImportDataFromTextbox = computed<boolean>(() => allSupportedImportFileTypesMap.value[fileType.value]?.dataFromTextbox ?? false);
-    for (const importFileType of allSupportedImportFileTypes.value) {
+const allFileSubTypes = computed<LocalizedImportFileTypeSubType[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.subTypes);
-        if (importFileType.type === fileType.value) {
+const allSupportedEncodings = computed<LocalizedImportFileTypeSupportedEncodings[] | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.supportedEncodings);
-            return !!importFileType.dataFromTextbox;
-        }
-    }
-
-    return false;
-});
-
-const allFileSubTypes = computed<LocalizedImportFileTypeSubType[] | undefined>(() => {
-    for (const importFileType of allSupportedImportFileTypes.value) {
-        if (importFileType.type === fileType.value) {
-            return importFileType.subTypes;
-        }
-    }
-
-    return undefined;
-});
-
-const allSupportedEncodings = computed<LocalizedImportFileTypeSupportedEncodings[] | undefined>(() => {
-    for (const importFileType of allSupportedImportFileTypes.value) {
-        if (importFileType.type === fileType.value) {
-            return importFileType.supportedEncodings;
-        }
-    }
-
-    return undefined;
-});
 
 const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
 const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
@@ -1179,37 +1176,22 @@ const supportedImportFileExtensions = computed<string | undefined>(() => {
         }
     }
 
-    return findExtensionByType(allSupportedImportFileTypes.value, fileType.value);
+    return allSupportedImportFileTypesMap.value[fileType.value]?.extensions;
 });
 
 const exportFileGuideDocumentUrl = computed<string | undefined>(() => {
-    for (const importFileType of allSupportedImportFileTypes.value) {
+    const document = allSupportedImportFileTypesMap.value[fileType.value]?.document;
-        if (importFileType.type === fileType.value) {
-            const document = importFileType.document;
 
-            if (!document) {
+    if (!document) {
-                return undefined;
+        return undefined;
-            }
-
-            const language = document.language ? document.language + '/' : '';
-            const anchor = document.anchor ? '#' + document.anchor : '';
-            return `https://ezbookkeeping.mayswind.net/${language}export_and_import${anchor}`;
-        }
     }
 
-    return undefined;
+    const language = document.language ? document.language + '/' : '';
+    const anchor = document.anchor ? '#' + document.anchor : '';
+    return `https://ezbookkeeping.mayswind.net/${language}export_and_import${anchor}`;
 });
 
-const exportFileGuideDocumentLanguageName = computed<string | undefined>(() => {
+const exportFileGuideDocumentLanguageName = computed<string | undefined>(() => allSupportedImportFileTypesMap.value[fileType.value]?.document?.displayLanguageName);
-    for (const importFileType of allSupportedImportFileTypes.value) {
-        if (importFileType.type === fileType.value) {
-            const document = importFileType.document;
-            return document?.displayLanguageName;
-        }
-    }
-
-    return undefined;
-});
 
 const fileName = computed<string>(() => importFile.value?.name || '');
 
@@ -2695,7 +2677,7 @@ watch(fileSubType, (newValue) => {
     let supportedExtensions: string | undefined = findExtensionByType(allFileSubTypes.value, newValue);
 
     if (!supportedExtensions) {
-        supportedExtensions = findExtensionByType(allSupportedImportFileTypes.value, fileType.value);
+        supportedExtensions = allSupportedImportFileTypesMap.value[fileType.value]?.extensions;
     }
 
     if (importFile.value && importFile.value.name && !isFileExtensionSupported(importFile.value.name, supportedExtensions || '')) {