JS: Backport file picker as new module

applications/system/js_app/application.fam

@@ -111,6 +111,14 @@ App(
     sources=["modules/js_gui/dialog.c"],
 )
 
+App(
+    appid="js_gui__file_picker",
+    apptype=FlipperAppType.PLUGIN,
+    entry_point="js_gui_file_picker_ep",
+    requires=["js_app"],
+    sources=["modules/js_gui/file_picker.c"],
+)
+
 App(
     appid="js_notification",
     apptype=FlipperAppType.PLUGIN,

applications/system/js_app/examples/apps/Scripts/Examples/gui.js

@@ -8,6 +8,7 @@ let textInputView = require("gui/text_input");
 let byteInputView = require("gui/byte_input");
 let textBoxView = require("gui/text_box");
 let dialogView = require("gui/dialog");
+let filePicker = require("gui/file_picker");
 let flipper = require("flipper");
 
 // declare view instances
@@ -40,6 +41,7 @@ let views = {
             "Text input & Dialog",
             "Byte input",
             "Text box",
+            "File picker",
             "Exit app",
         ],
     }),
@@ -63,6 +65,15 @@ eventLoop.subscribe(views.demos.chosen, function (_sub, index, gui, eventLoop, v
     } else if (index === 4) {
         gui.viewDispatcher.switchTo(views.longText);
     } else if (index === 5) {
+        let path = filePicker.pickFile("/ext", "*");
+        if (path) {
+            views.helloDialog.set("text", "You selected:\n" + path);
+        } else {
+            views.helloDialog.set("text", "You didn't select a file");
+        }
+        views.helloDialog.set("center", "Nice!");
+        gui.viewDispatcher.switchTo(views.helloDialog);
+    } else if (index === 6) {
         eventLoop.stop();
     }
 }, gui, eventLoop, views);

applications/system/js_app/modules/js_gui/file_picker.c

@@ -0,0 +1,47 @@
+#include "../../js_modules.h"
+#include <dialogs/dialogs.h>
+#include <assets_icons.h>
+
+static void js_gui_file_picker_pick_file(struct mjs* mjs) {
+    const char *base_path, *extension;
+    JS_FETCH_ARGS_OR_RETURN(mjs, JS_EXACTLY, JS_ARG_STR(&base_path), JS_ARG_STR(&extension));
+
+    DialogsApp* dialogs = furi_record_open(RECORD_DIALOGS);
+    const DialogsFileBrowserOptions browser_options = {
+        .extension = extension,
+        .icon = &I_file_10px,
+        .base_path = base_path,
+    };
+    FuriString* path = furi_string_alloc_set(base_path);
+    if(dialog_file_browser_show(dialogs, path, path, &browser_options)) {
+        mjs_return(mjs, mjs_mk_string(mjs, furi_string_get_cstr(path), ~0, true));
+    } else {
+        mjs_return(mjs, MJS_UNDEFINED);
+    }
+    furi_string_free(path);
+    furi_record_close(RECORD_DIALOGS);
+}
+
+static void* js_gui_file_picker_create(struct mjs* mjs, mjs_val_t* object, JsModules* modules) {
+    UNUSED(modules);
+    *object = mjs_mk_object(mjs);
+    mjs_set(mjs, *object, "pickFile", ~0, MJS_MK_FN(js_gui_file_picker_pick_file));
+    return NULL;
+}
+
+static const JsModuleDescriptor js_gui_file_picker_desc = {
+    "gui__file_picker",
+    js_gui_file_picker_create,
+    NULL,
+    NULL,
+};
+
+static const FlipperAppPluginDescriptor plugin_descriptor = {
+    .appid = PLUGIN_APP_ID,
+    .ep_api_version = PLUGIN_API_VERSION,
+    .entry_point = &js_gui_file_picker_desc,
+};
+
+const FlipperAppPluginDescriptor* js_gui_file_picker_ep(void) {
+    return &plugin_descriptor;
+}

applications/system/js_app/types/gui/file_picker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @brief Displays a file picker and returns the selected file, or undefined if cancelled
+ * @param basePath The path to start at
+ * @param extension The file extension(s) to show (like `.sub`, `.iso|.img`, `*`)
+ */
+export declare function pickFile(basePath: string, extension: string): string | undefined;