GeoLibre File Listing Tools: Native Dialogs, Web Inputs, and Remote Browsers

GeoLibre provides four primary file listing mechanisms: native Tauri dialogs for desktop, HTML file inputs for web users, drag-and-drop handlers for map canvas interactions, and curated remote dataset browsers with allow-list security.

The opengeos/GeoLibre codebase implements these tools as modular, reusable components spanning desktop apps, plugin packages, and Web Worker layers. Developers can mix these approaches based on target platform and security requirements.

Native File Dialogs: Desktop-First Listing

For desktop deployments, GeoLibre leverages Tauri's OS integration to open native file pickers. The entry point is loadDroppedRasterFiles() in apps/geolibre-desktop/src/lib/tauri-io.ts.

This function processes both:

• Files returned from window.__TAURI__.dialog.open()
• Files dropped onto the map canvas (handled by the same utility)

import { loadDroppedRasterFiles } from '@geolibre/desktop/tauri-io';

const files = await window.__TAURI__.dialog.open({
  multiple: true,
  filters: [{ name: 'Raster', extensions: ['tif', 'tiff', 'png'] }],
});

if (files) {
  const rasterEntries = loadDroppedRasterFiles(files);
  console.log('Selected rasters:', rasterEntries);
}

The loadDroppedRasterFiles implementation normalizes FileList or File[] inputs into GeoLibre's internal raster entry format. See lines 3200–3210 of [tauri-io.ts](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/lib/tauri-io.ts) for the full signature.

Web File Input: Cross-Platform Compatibility

When running in browser contexts, GeoLibre falls back to standard HTML <input type="file"> elements. The StoryMapPanel component demonstrates this pattern in apps/geolibre-desktop/src/components/storymap/StoryMapPanel.tsx.

import { useRef } from 'react';

export function UploadButton() {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const onClick = () => fileInputRef.current?.click();

  const onChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const text = await file.text();
    console.log('File name:', file.name, text);
  };

  return (
    <>
      <button onClick={onClick}>Upload</button>
      <input
        ref={fileInputRef}
        type="file"
        style={{ display: 'none' }}
        onChange={onChange}
      />
    </>
  );
}

This approach works identically in desktop (Tauri window) and pure web deployments. The fileInputRef pattern appears throughout lines 101–511 of [StoryMapPanel.tsx](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/components/storymap/StoryMapPanel.tsx).

Drag-and-Drop File Listing

GeoLibre unifies drag-and-drop handling with the same loadDroppedRasterFiles() function used for native dialogs. When users drop files onto the map canvas:

1. The drop event captures FileList from event.dataTransfer.files
2. The handler passes this directly to loadDroppedRasterFiles()
3. Each file is validated against supported raster formats

This consolidation eliminates duplicate validation logic. The drag handler resides in the same tauri-io.ts module as the dialog integration.

Remote Dataset Browsers: Curated File Listings

For cloud-hosted data, GeoLibre provides structured browsing panels that list pre-approved remote sources. Three supporting files enable this:

• packages/plugins/src/lib/utils/remote-file-formats.ts — Defines REMOTE_FILE_FORMATS constant with allowable formats, size limits, and display labels
• workers/tiles/src/allowlisted-fetch.ts — Enforces domain allow-lists before fetching remote resources
• workers/tiles/src/index.ts — Worker entry point exposing listed tile datasets to the frontend

Listing Supported Remote Formats

import { REMOTE_FILE_FORMATS } from '@geolibre/plugins/utils/remote-file-formats';

function listSupportedRemoteFormats() {
  return Object.keys(REMOTE_FILE_FORMATS);
}

console.log('Remote formats GeoLibre can ingest:', listSupportedRemoteFormats());

The REMOTE_FILE_FORMATS object configures UI captions, file extensions, and maximum byte sizes for sources like Source Cooperative and Hugging Face datasets.

Secure Remote Fetching with Allow-Lists

import { fetchAllowlistedUpstream } from 'workers/tiles/src/allowlisted-fetch';

async function getTileMetadata(url: string) {
  const response = await fetchAllowlistedUpstream(url);
  const json = await response.json();
  console.log('Tile metadata:', json);
}

The fetchAllowlistedUpstream function (lines 42–63 of [allowlisted-fetch.ts](https://github.com/opengeos/GeoLibre/blob/main/workers/tiles/src/allowlisted-fetch.ts)) maintains an internal allow-list map. Only URLs matching approved patterns resolve, preventing arbitrary remote file access.

Choosing the Right GeoLibre File Listing Tool

Scenario	Recommended Tool	Source File
Desktop native dialogs	loadDroppedRasterFiles() + Tauri dialog	apps/geolibre-desktop/src/lib/tauri-io.ts
Web/cross-platform uploads	Hidden <input type="file"> with ref	apps/geolibre-desktop/src/components/storymap/StoryMapPanel.tsx
Drag-and-drop on map	Same loadDroppedRasterFiles() handler	apps/geolibre-desktop/src/lib/tauri-io.ts
Browse remote catalogs	REMOTE_FILE_FORMATS panels	packages/plugins/src/lib/utils/remote-file-formats.ts
Secure tile worker access	fetchAllowlistedUpstream()	workers/tiles/src/allowlisted-fetch.ts

All four approaches return file metadata in GeoLibre's internal formats, enabling consistent downstream processing regardless of listing source.

Summary

• Native Tauri dialogs provide desktop-optimized file listing via tauri-io.ts utilities
• HTML file inputs ensure browser compatibility through the StoryMapPanel pattern
• Drag-and-drop handlers reuse the same loadDroppedRasterFiles() function for consistency
• Remote browsers combine format constants with allow-list security for cloud data access

Each tool is purpose-built for its platform constraints while maintaining type-safe interoperability across the GeoLibre monorepo.

Frequently Asked Questions

How do I list files from the native file system in GeoLibre desktop apps?

Use Tauri's dialog API combined with loadDroppedRasterFiles() from apps/geolibre-desktop/src/lib/tauri-io.ts. Call window.__TAURI__.dialog.open() with multiple: true and appropriate filters, then pass the result to loadDroppedRasterFiles() for normalization into GeoLibre's raster entry format.

Can GeoLibre list remote files from any URL?

No. Remote file listing is restricted to allow-listed sources enforced by fetchAllowlistedUpstream() in workers/tiles/src/allowlisted-fetch.ts. The allow-list pattern prevents unauthorized data access in production deployments. Curated remote browsers use REMOTE_FILE_FORMATS to present only pre-approved dataset collections.

What file formats does GeoLibre's remote browser support?

The supported formats are defined in REMOTE_FILE_FORMATS within packages/plugins/src/lib/utils/remote-file-formats.ts. This constant object specifies extensions, MIME types, size limits, and UI labels for each allowable remote format. Query Object.keys(REMOTE_FILE_FORMATS) at runtime to enumerate current capabilities.

How does GeoLibre handle drag-and-dropped files differently from dialog-selected files?

It doesn't. Both flows converge on loadDroppedRasterFiles() in tauri-io.ts. Whether files originate from event.dataTransfer.files (drop) or window.__TAURI__.dialog.open() (dialog), the same normalization and validation logic applies. This design eliminates code duplication between input methods.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}