FileViewer

Auto-detecting file viewer. Accepts a FileSource (URL / base64 / bytes) and routes to the right renderer by category: image (delegates to ImageViewer), markdown (tabbed Preview / Source), text (highlight.js coloured), embedded (PDF and other browser-renderable types via <iframe>), zip (tree + nested viewer for the selected entry), and unsupported (info message). Detection prefers the source's MIME, otherwise the file extension.

Zip archive (URL source)

Zip archives render a folder tree of their contents on the left; selecting an entry previews it on the right with the same category routing (text, code, image, …). The viewer fetches the archive bytes from the FileSource and unzips them in the browser. Each entry also offers a download.

React example

Blazor example

React TypeScript

Razor

Could not load previewJavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

Markdown source (inline bytes)

UTF-8 bytes decoded and rendered with Markdig (Blazor) or a markdown parser (React) in a Preview / Source tabbed pane.

React example

Blazor example

React TypeScript

Razor

Preview

Text

Hello FileViewer

The FileViewer picks a renderer per file kind.

Images flow through ImageViewer.
Markdown picks up Markdig.
Text/code is coloured with highlight.js.
Zip archives expand to a tree.

var source = new FileSource.Bytes(bytes) { FileName = "readme.md" };

# Hello FileViewer

The **FileViewer** picks a renderer per file kind.

- Images flow through `ImageViewer`.
- Markdown picks up Markdig.
- Text/code is coloured with highlight.js.
- Zip archives expand to a tree.

```csharp
var source = new FileSource.Bytes(bytes) { FileName = "readme.md" };
```

Text source (inline bytes, JSON)

UTF-8 bytes rendered through highlight.js using the language inferred from the file extension.

React example

Blazor example

React TypeScript

Razor

{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}

Unsupported

Unknown extensions fall through to a friendly info message instead of throwing.

React example

Blazor example

React TypeScript

Razor

data.bin

application/octet-stream

Image source

Image kinds delegate to ImageViewer with Framed + Downloadable chrome.

React example

Blazor example

React TypeScript

Razor

React

Blazor

FileViewer Class

Parameters

Name	Type	Default	Description
`Downloadable`	bool	True	When true (the default), shows a download button in the top-right corner of every previewable arm (markdown, text, embedded, zip) and as the primary action on the unsupported-file card. The image arm renders the button via the nested `Components.ImageViewer` instead — same behavior, same icon, just owned by the image viewer's own chrome.
`Fallback`	RenderFragment?		Rendered when `FileViewer.Source` is null.
`FileName`	string?		File name used for category detection (extension), the embedded <iframe> title, and as the default download name. Falls back to the source's own `FileSource.FileName`, otherwise to the URL's last path segment, otherwise to 'file'.
`MaxHeight`	string	60vh	Maximum height for inline renderers (text, markdown viewport, embedded iframe). Sets the scrollable region. Defaults to 60vh.
`Source`	FileSource?		File data to render. When null, `FileViewer.Fallback` is rendered instead (or nothing if no fallback is supplied).

Name: Downloadable

Type: bool

Default: True

Description: When true (the default), shows a download button in the top-right corner of every previewable arm (markdown, text, embedded, zip) and as the primary action on the unsupported-file card. The image arm renders the button via the nested Components.ImageViewer instead — same behavior, same icon, just owned by the image viewer's own chrome.

Name: Fallback

Type: RenderFragment?

Description: Rendered when FileViewer.Source is null.

Name: FileName

Type: string?

Description: File name used for category detection (extension), the embedded <iframe> title, and as the default download name. Falls back to the source's own FileSource.FileName, otherwise to the URL's last path segment, otherwise to 'file'.

Name: MaxHeight

Type: string

Default: 60vh

Description: Maximum height for inline renderers (text, markdown viewport, embedded iframe). Sets the scrollable region. Defaults to 60vh.

Name: Source

Type: FileSource?

Description: File data to render. When null, FileViewer.Fallback is rendered instead (or nothing if no fallback is supplied).