Fix Android style file selection (#1806)

Author: giswqs

apps/geolibre-desktop/src/components/panels/LayerPanel.tsx

@@ -1775,6 +1775,10 @@ export function LayerPanel({
               extensions: ["json", "sld", "qml", "xml"],
             },
           ],
+          // Android filters document pickers by MIME type, but SLD and QML do
+          // not have consistently reported MIME types. Leave the native picker
+          // broad there, then validate the selected file by content below.
+          androidFilters: [],
           accept: ".json,.sld,.qml,.xml,application/json,application/xml,text/xml",
           readText: true,
         });

apps/geolibre-desktop/src/components/panels/StyleManagerPanel.tsx

@@ -354,6 +354,9 @@ export function StyleManagerPanel() {
             extensions: ["json", "qml", "sld", "xml"],
           },
         ],
+        // Android cannot reliably map the SLD/QML extensions to MIME types.
+        // Accept any document there and validate its contents after selection.
+        androidFilters: [],
         accept: ".json,.qml,.sld,.xml,application/json,application/xml,text/xml",
         readText: true,
       });

apps/geolibre-desktop/src/lib/file-dialog-filters.ts

@@ -0,0 +1,27 @@
+import { isAndroid } from "./is-mobile";
+
+export interface FileDialogFilter {
+  name: string;
+  extensions: string[];
+}
+
+/**
+ * Select native file-dialog filters for the current platform.
+ *
+ * Android's document picker filters by MIME type and cannot reliably map
+ * uncommon filename extensions. Callers can therefore provide a separate
+ * Android filter set while retaining precise extension filters on desktop and
+ * iOS.
+ *
+ * @param filters - Default file filters used outside Android.
+ * @param androidFilters - Android-specific filters, when required.
+ * @param userAgent - Override for testing; defaults to `navigator.userAgent`.
+ * @returns The filters appropriate for the current platform.
+ */
+export function nativeFileDialogFilters(
+  filters: FileDialogFilter[],
+  androidFilters: FileDialogFilter[] | undefined,
+  userAgent: string = typeof navigator !== "undefined" ? navigator.userAgent : "",
+): FileDialogFilter[] {
+  return isAndroid(userAgent) && androidFilters !== undefined ? androidFilters : filters;
+}

apps/geolibre-desktop/src/lib/is-mobile.ts

@@ -23,6 +23,22 @@ import { isIpadDesktopUserAgent } from "@geolibre/core";
  * @returns True on Android/iOS (including desktop-UA iPadOS).
  */
 const MOBILE_UA_PATTERN = /Android|iPhone|iPad|iPod/i;
+const ANDROID_UA_PATTERN = /Android/i;
+
+/**
+ * Whether the app is running on Android.
+ *
+ * This narrower check is used for platform APIs whose Android behavior differs
+ * from iOS, such as native document-picker MIME filtering.
+ *
+ * @param userAgent - Override for testing; defaults to `navigator.userAgent`.
+ * @returns True when the user agent identifies Android.
+ */
+export function isAndroid(
+  userAgent: string = typeof navigator !== "undefined" ? navigator.userAgent : "",
+): boolean {
+  return ANDROID_UA_PATTERN.test(userAgent);
+}
 
 export function isMobile(
   userAgent: string = typeof navigator !== "undefined" ? navigator.userAgent : "",

apps/geolibre-desktop/src/lib/tauri-io.ts

@@ -38,6 +38,7 @@ import {
 import type { GeotaggedPhotoResult } from "./geotagged-photos";
 import { PHOTO_IMAGE_EXTENSIONS, isPhotoDropFileName, isPhotoFileName } from "./geotagged-photos";
 import { projectedGeoJsonCrs } from "./crs-utils";
+import { nativeFileDialogFilters, type FileDialogFilter } from "./file-dialog-filters";
 import { parseGpxLayer } from "./gpx";
 import { isTauri } from "./is-tauri";
 import { SHAPEFILE_COMPANION_EXTENSIONS, shapefileCompanionPathsFromSelection } from "./mas-build";
@@ -71,10 +72,7 @@ function browserSafeFileName(path: string): string {
   return path.split(/[/\\]/).pop() || "project.geolibre.json";
 }
 
-export interface FileDialogFilter {
-  name: string;
-  extensions: string[];
-}
+export type { FileDialogFilter } from "./file-dialog-filters";
 
 interface PickLocalPathOptions {
   accept?: string;
@@ -90,6 +88,7 @@ interface PickSavePathOptions {
 
 interface LocalDataFileOptions {
   filters: FileDialogFilter[];
+  androidFilters?: FileDialogFilter[];
   accept: string;
   readBinary?: boolean;
   readText?: boolean;
@@ -2462,7 +2461,7 @@ export async function openLocalDataFileWithFallback(options: LocalDataFileOption
   if (isTauri()) {
     const selected = await open({
       multiple: false,
-      filters: options.filters,
+      filters: nativeFileDialogFilters(options.filters, options.androidFilters),
     });
     if (!selected || typeof selected !== "string") return null;
     const data = options.readBinary ? toArrayBuffer(await readFile(selected)) : undefined;

tests/file-dialog-filters.test.ts

@@ -0,0 +1,40 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  nativeFileDialogFilters,
+  type FileDialogFilter,
+} from "../apps/geolibre-desktop/src/lib/file-dialog-filters";
+
+const styleFilters: FileDialogFilter[] = [
+  {
+    name: "Style",
+    extensions: ["json", "sld", "qml", "xml"],
+  },
+];
+
+describe("nativeFileDialogFilters", () => {
+  it("uses the Android override even when it intentionally has no filters", () => {
+    assert.deepEqual(
+      nativeFileDialogFilters(styleFilters, [], "Mozilla/5.0 (Linux; Android 16; Mobile)"),
+      [],
+    );
+  });
+
+  it("keeps extension filters on desktop and iOS", () => {
+    assert.equal(
+      nativeFileDialogFilters(styleFilters, [], "Mozilla/5.0 (X11; Linux x86_64)"),
+      styleFilters,
+    );
+    assert.equal(
+      nativeFileDialogFilters(styleFilters, [], "Mozilla/5.0 (iPhone; CPU iPhone OS 18_0)"),
+      styleFilters,
+    );
+  });
+
+  it("keeps the default filters on Android when no override is supplied", () => {
+    assert.equal(
+      nativeFileDialogFilters(styleFilters, undefined, "Mozilla/5.0 (Linux; Android 16)"),
+      styleFilters,
+    );
+  });
+});

tests/is-mobile.test.ts

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { isMobile } from "../apps/geolibre-desktop/src/lib/is-mobile";
+import { isAndroid, isMobile } from "../apps/geolibre-desktop/src/lib/is-mobile";
 
 describe("isMobile", () => {
   it("detects Android (incl. the Tauri webview UA)", () => {
@@ -45,3 +45,19 @@ describe("isMobile", () => {
     assert.equal(isMobile(""), false);
   });
 });
+
+describe("isAndroid", () => {
+  it("detects the Android WebView user agent", () => {
+    assert.equal(
+      isAndroid(
+        "Mozilla/5.0 (Linux; Android 16; Mobile) AppleWebKit/537.36 Version/4.0 Chrome/138 Mobile Safari/537.36 wv",
+      ),
+      true,
+    );
+  });
+
+  it("does not classify iOS or desktop user agents as Android", () => {
+    assert.equal(isAndroid("Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X)"), false);
+    assert.equal(isAndroid("Mozilla/5.0 (X11; Linux x86_64) Chrome/138 Safari/537.36"), false);
+  });
+});