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

> Explore GeoLibre file listing tools: native dialogs, web inputs, drag-and-drop, and secure remote browsers. Easily manage your geospatial data across platforms.

- Repository: [Open Geospatial Solutions/GeoLibre](https://github.com/opengeos/GeoLibre)
- Tags: how-to-guide
- Published: 2026-08-18

---

**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`](https://github.com/opengeos/GeoLibre/blob/main/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)

```typescript
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/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`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/components/storymap/StoryMapPanel.tsx).

```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/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/workers/tiles/src/allowlisted-fetch.ts)** — Enforces domain allow-lists before fetching remote resources
- **[`workers/tiles/src/index.ts`](https://github.com/opengeos/GeoLibre/blob/main/workers/tiles/src/index.ts)** — Worker entry point exposing listed tile datasets to the frontend

### Listing Supported Remote Formats

```typescript
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

```typescript
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/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/components/storymap/StoryMapPanel.tsx) |
| Drag-and-drop on map | Same `loadDroppedRasterFiles()` handler | [`apps/geolibre-desktop/src/lib/tauri-io.ts`](https://github.com/opengeos/GeoLibre/blob/main/apps/geolibre-desktop/src/lib/tauri-io.ts) |
| Browse remote catalogs | `REMOTE_FILE_FORMATS` panels | [`packages/plugins/src/lib/utils/remote-file-formats.ts`](https://github.com/opengeos/GeoLibre/blob/main/packages/plugins/src/lib/utils/remote-file-formats.ts) |
| Secure tile worker access | `fetchAllowlistedUpstream()` | [`workers/tiles/src/allowlisted-fetch.ts`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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`](https://github.com/opengeos/GeoLibre/blob/main/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.