components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.description

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.image-section-title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.image-section-description

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.react-example-label
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.example-label
placeholder.png
React TypeScript
Razor

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.markdown-section-title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.markdown-section-description

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.react-example-label
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.example-label
app.components.file-grid.preview-markdown-tab-preview

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" };
app.components.file-grid.preview-markdown-tab-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.

```csharp
var source = new FileSource.Bytes(bytes) { FileName = "readme.md" };
```
React TypeScript
Razor

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.text-section-title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.text-section-description

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.react-example-label
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.example-label
{
  "name": "ImageViewer",
  "features": ["rotate", "zoom", "flip", "crop"],
  "version": "1.0"
}
React TypeScript
Razor

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.unsupported-section-title

components.PowerPortalsPro.Demo.Client.Customizations.Pages.Viewers.FileViewerDemoPage.unsupported-section-description

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.react-example-label
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.DemoSection.example-label
data.bin
application/octet-stream
React TypeScript
Razor
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.react-tab components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.blazor-tab

FileViewer components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.class

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.parameters

components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.description
Downloadablebool
True
FallbackRenderFragment?
FileNamestring?
MaxHeightstring
60vh
SourceFileSource?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name: Downloadable
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type: bool
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default: True
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name: Fallback
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type: RenderFragment?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name: FileName
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type: string?
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name: MaxHeight
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type: string
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.default: 60vh
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.name: Source
components.PowerPortalsPro.Demo.Client.Customizations.Components.Documentation.ApiDocumentation.type: FileSource?