Fix: add an API compatibility layer for the old file picker and change the new implementation as V2

frontend/src/components/modals/filepicker/index.tsx

@@ -34,6 +34,7 @@ export interface FilePickerProps {
   allowAllFiles?: boolean;
   defaultHidden?: boolean;
   max?: number;
+  fileSelType?: FileSelectionType;
   onSubmit: (val: { path: string; realpath: string }) => void;
   closeModal?: () => void;
 }
@@ -48,6 +49,12 @@ export interface File {
   created: number;
 }
 
+export enum FileSelectionType {
+  FILE,
+  FOLDER,
+  NONE,
+}
+
 interface FileListing {
   realpath: string;
   files: File[];
@@ -127,6 +134,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
   allowAllFiles = true,
   defaultHidden = false, // false by default makes sense for most users
   max = 1000,
+  fileSelType = FileSelectionType.NONE,
   onSubmit,
   closeModal,
 }) => {
@@ -327,7 +335,7 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
           </Focusable>
         </DialogControlsSection>
       </DialogBody>
-      {!loading && error === FileErrorTypes.None && !includeFiles && (
+      {!loading && error === FileErrorTypes.None && fileSelType !== FileSelectionType.NONE && (
         <DialogFooter>
           <DialogButton
             className="Primary"
@@ -337,7 +345,9 @@ const FilePicker: FunctionComponent<FilePickerProps> = ({
               closeModal?.();
             }}
           >
-            {t('FilePickerIndex.folder.select')}
+            {fileSelType === FileSelectionType.FILE
+              ? t('FilePickerIndex.file.select')
+              : t('FilePickerIndex.folder.select')}
           </DialogButton>
         </DialogFooter>
       )}

frontend/src/plugin-loader.tsx

@@ -14,7 +14,7 @@ import { FaExclamationCircle, FaPlug } from 'react-icons/fa';
 
 import { DeckyState, DeckyStateContextProvider, UserInfo, useDeckyState } from './components/DeckyState';
 import LegacyPlugin from './components/LegacyPlugin';
-import { File } from './components/modals/filepicker';
+import { File, FileSelectionType } from './components/modals/filepicker';
 import { deinitFilepickerPatches, initFilepickerPatches } from './components/modals/filepicker/patches';
 import MultiplePluginsInstallModal from './components/modals/MultiplePluginsInstallModal';
 import PluginInstallModal from './components/modals/PluginInstallModal';
@@ -360,6 +360,38 @@ class PluginLoader extends Logger {
   }
 
   openFilePicker(
+    startPath: string,
+    selectFiles?: boolean,
+    regex?: RegExp,
+  ): Promise<{ path: string; realpath: string }> {
+    if (selectFiles) {
+      return this.openFilePickerV2(
+        startPath,
+        true,
+        regex,
+        true,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        FileSelectionType.FILE,
+      );
+    } else {
+      return this.openFilePickerV2(
+        startPath,
+        false,
+        regex,
+        true,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        FileSelectionType.FOLDER,
+      );
+    }
+  }
+
+  openFilePickerV2(
     startPath: string,
     includeFiles?: boolean,
     filter?: RegExp | ((file: File) => boolean),
@@ -368,6 +400,7 @@ class PluginLoader extends Logger {
     showHiddenFiles?: boolean,
     allowAllFiles?: boolean,
     max?: number,
+    select?: FileSelectionType,
   ): Promise<{ path: string; realpath: string }> {
     return new Promise((resolve, reject) => {
       const Content = ({ closeModal }: { closeModal?: () => void }) => (
@@ -389,6 +422,7 @@ class PluginLoader extends Logger {
               defaultHidden={showHiddenFiles}
               onSubmit={resolve}
               closeModal={closeModal}
+              fileSelType={select}
               max={max}
             />
           </WithSuspense>