# File Viewer

Source: https://lumeo.nativ.sh/components/file-viewer

# File Viewer

Universal preview surface — detects the file type from MIME / extension and renders inline: PDF, images, video, audio, Markdown, source code, JSON, CSV, and plain text. Unknown types fall back to a download CTA. One component replaces a stack of bespoke per-type renderers.

**Satellite package.** The FileViewer lives in `Lumeo.FileViewer` — install it alongside the core `Lumeo` package. It transitively pulls `Lumeo.PdfViewer` (for the PDF kind) and `Lumeo.CodeEditor` (for the Code / JSON kinds), so a single install covers every supported preview.

## When to Use

-   Document or attachment lists where each row links to a heterogeneous file (PDF report, screenshot, CSV export, README)
-   File managers / DMS surfaces that need a quick preview pane next to the tree
-   Audit / compliance flows where the user has to inspect the actual content before approving an action
-   Ticketing systems where customers attach mixed-format evidence
-   Anywhere consumers would otherwise build a switch over Pdf / Image / Video / Markdown viewers by hand

## How Detection Works

Resolution runs in this order — each step wins over the next:

1.  Explicit `Kind` parameter (anything other than `Auto` short-circuits)
2.  Explicit `MimeType` parameter (most reliable for blob URLs / signed URLs where the extension is hidden)
3.  Optional `HEAD` request `Content-Type` — off by default (`AutoHead="true"` to enable) because many CDNs reject HEAD with 405
4.  URL extension — the last-resort guess from the path segment

Preview Code

Auto-detection — Image

sample.svg

[](sample-files/sample.svg)

![sample.svg](sample-files/sample.svg)

Copy Code

Preview Code

Auto-detection — Markdown

README.md

[](sample-files/README.md)

Copy Code

Preview Code

Auto-detection — CSV

data.csv

[](sample-files/data.csv)

Copy Code

Preview Code

Auto-detection — source code

Program.cs

[](sample-files/Program.cs)

Copy Code

Preview Code

Auto-detection — PDF

 / 0

100%[](https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf)

Copy Code

Preview Code

Explicit Kind override

Force a kind when the URL has no extension (typical for blob / signed URLs).

 / 0

100%[](https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf)

Copy Code

Preview Code

Explicit MimeType

Provide MIME from your backend metadata response — most reliable for opaque URLs.

screenshot.svg

[](sample-files/sample.svg)

![screenshot.svg](sample-files/sample.svg)

Copy Code

Preview Code

Kind detected callback

README.md

[](sample-files/README.md)

Detected kind: `FileKind.Markdown`

Copy Code

Preview Code

Unknown type falls back to download

archive.zip

[](sample-files/data.csv)

### Preview unavailable

This file type cannot be previewed inline.

[Download](sample-files/data.csv)

Copy Code

Preview Code

Error handling

does-not-exist.csv

[](sample-files/does-not-exist.csv)

Copy Code

Preview Code

Chromeless embed (toolbar hidden)

![sample.svg](sample-files/sample.svg)

Copy Code

Preview Code

Custom renderer for a kind

sample.svg

[](sample-files/sample.svg)

![sample.svg](sample-files/sample.svg)

Copy Code

## Auth-Aware Fetching

Text-based kinds (Markdown, Code, JSON, CSV, Text) are fetched via `HttpClient`. For signed-but-not-presigned URLs you have three knobs:

-   `HttpClient="..."` — pass a pre-configured client (with handlers attached) directly
-   `ConfigureRequest="..."` — mutate the outgoing `HttpRequestMessage` per call (typical for `Authorization` headers)
-   Register `HttpClient` in DI — picked up automatically (the standard Blazor WASM pattern)

## Safety Limits

-   `MaxBytes` (default 10 MB) — refused upfront via `Content-Length` when known, truncated mid-stream otherwise. No 100 MB OOMs.
-   `MaxCsvRows` (default 1000) — CSV parser stops after this many rows and adds a truncation notice.
-   Markdown is rendered with `.DisableHtml()` — raw `<script>` / `<iframe>` in user-supplied `.md` never reach the DOM.
-   SVG renders via `<img>` (not inline) — embedded scripts in SVG can't execute.
-   In-flight fetches are cancelled via `CancellationToken` when `Src` changes.

## Accessibility

-   Body region wears `role="document"` with an `aria-label` derived from the file name or kind.
-   Loading + error states announce via the default `Spinner` / `EmptyState` components (both come pre-wired with `aria-live`).
-   Video / audio kinds use native browser controls with their built-in keyboard handling.
-   The download anchor is keyboard-reachable with a visible focus ring on the toolbar.