---
title: "Preview Files in Blazor File Manager: A Comprehensive Guide"
published_at: "2023-05-18T10:45:05+00:00"
modified_at: "2026-06-26T09:38:24+00:00"
url: "https://www.syncfusion.com/blogs/post/preview-file-blazor-file-manager"
excerpt: "This blog covers the process of previewing PDF and Word files in the Blazor File Manager using Blazor PDF Viewer and Word Processor."
taxonomy_category:
  - "Blazor"
  - "Development"
  - "File Manager"
  - "Web"
taxonomy_post_tag:
  - "Blazor"
  - "file manager"
  - "PDF"
  - "productivity"
  - "Web Development"
---

# Preview Files in Blazor File Manager: A Comprehensive Guide

[Rajendran R](https://www.syncfusion.com/blogs/author/rajendranr)

![Preview Files in Blazor File Manager: A Comprehensive Guide](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Preview-Files-in-Blazor-File-Manager-A-Comprehensive-Guide.png)


The [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)
 is a graphical user interface component for managing the file system that allows users to perform the most common file operations like viewing, editing, and sorting files or folders. This component also provides easy navigation for browsing folders to select a file or folder from various file system providers like Amazon, Microsoft Azure, and more.

Previewing PDF and Word files using Blazor File Manager is impossible by default. However, this functionality can be added by integrating the [Syncfusion Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer)
 and [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor)
 components.

Let’s get started!

Build Powerful File Management in Blazor

Add a full-featured file explorer to your Blazor apps with Syncfusion Blazor File Manager. Handle file uploads, downloads, search, sorting, previews, and other file operations through an intuitive, responsive interface.

[Add Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)

## Creating a Blazor Server app

Create a [Blazor Server app](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
 by utilizing the [Syncfusion Blazor Template Studio extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio)
, and include the Blazor File Manager. You can refer to this [documentation](https://blazor.syncfusion.com/documentation/file-manager/getting-started)
 to begin working with the Blazor File Manager.

**Note:** You must include a valid license key (either paid or trial) within your applications. Refer to this [help topic](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview)
 for more information.

Add the namespace **@**** using**** Syncfusion.Blazor.FileManager** in the **_Imports.razor** file and replace the following code in the ** Index.razor** file:

```
@page "/"

<PageTitle>Preview PDF and Word files using Blazor PDF Viewer and Word Processor in File Manager</PageTitle>

<div class="control-region">
 <SfFileManager TValue="FileManagerDirectoryContent" ShowThumbnail="true" AllowMultiSelection="false">
  <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                           UploadUrl="/api/FileManager/Upload"
                           DownloadUrl="/api/FileManager/Download"
                           GetImageUrl="/api/FileManager/GetImage">
  </FileManagerAjaxSettings>
 </SfFileManager>
</div>
```

![Blazor File Manager Control](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Blazor-File-Manager-Control-2.png)

Blazor File Manager Control

## Implementing pop-up previews with Blazor Dialog

The [Blazor Dialog component](https://blazor.syncfusion.com/documentation/dialog/getting-started)
 displays essential information, notifications, and prompts to users to confirm decisions and gather input. It can also be used to preview Word and PDF files in a pop-up window. To use this component, refer to its getting started [documentation](https://blazor.syncfusion.com/documentation/dialog/getting-started)
.

To open a modal dialog on opening a file, bind the **OnFileOpen** event in the ** FileManagerEvents** component in Blazor File Manager.

```
<SfFileManager TValue="FileManagerDirectoryContent" ShowThumbnail="true" AllowMultiSelection="false">
 <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                          UploadUrl="/api/FileManager/Upload"
                          DownloadUrl="/api/FileManager/Download"
                          GetImageUrl="/api/FileManager/GetImage">
 </FileManagerAjaxSettings>
 <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="OpenFilePreview"></FileManagerEvents>
</SfFileManager>

@code
{
  private void OpenFilePreview(FileOpenEventArgs<FileManagerDirectoryContent> args)
  {
  }
}
```

Render the dialog component by enabling the **AllowDragging**, ** EnableResize**, and ** Visible** properties. To prevent re-rendering the dialog’s content when closing, enable the ** AllowPrerender** property. Additionally, include **@using Syncfusion.Blazor.Popups** in the ** Imports.razor** component.

```
@page "/"

<PageTitle>Preview PDF and Word files using Blazor PDF Viewer and Word Processor from File Manager</PageTitle>

<div class="control-region">
    
   @* File Manager component rendering section*@
    
   <SfDialog Width="100%" Height="100%" EnableResize="true" AllowDragging="true" ShowCloseIcon="true" AllowPrerender="true" Visible="@IsDialogVisible">
     <DialogTemplates>
        <Header> @DialogTitle </Header>
        <Content>
           @DialogContent
        </Content>
     </DialogTemplates>
   </SfDialog>

</div>

@code
{
    private bool IsDialogVisible { get; set; } = true;
    private string DialogTitle { get; set; } = "Preview a File";
    private string DialogContent { get; set; } = string.Empty;
}
```

To render a dialog with 100% width and height, set the width and height of the dialog element and the body element of the HTML document to 100% using CSS. This can be done by adding the following CSS styles to your **Index.razor** component:

```
<style>
  html, body {
        width: 100%;
        height: 100%;
  }
</style>
```

## Integrating the Blazor PDF Viewer for PDF previews

The [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer)
 is a UI component that allows you to display PDFs from byte arrays, streams, or file paths. To use the PDF Viewer, refer to this [documentation](https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/server-side-application)
. To specify the location of the PDF document, set the **DocumentPath** property in the PDF Viewer component. Additionally, create a ** PdfVisible** variable to control the visibility of the PDF Viewer. Remember to include **[@using Syncfusion.Blazor.PdfViewerServer](https://www.nuget.org/packages/Syncfusion.Blazor.PdfViewerServer.Windows)** in the ** Imports.razor** component to use the PDF Viewer component.

**Note:** Include the script file **syncfusion-blazor-pdfviewer.min.js** in the **_Layout.cshtml** page.

Use **args.FileDetails.Type** to obtain the PDF extension and dynamically change the document path of the PDF Viewer component. Set ** IsDialogVisible** as ** false** and ** PdfVisible** and ** DocVisible** as ** none** to hide the Dialog, PDF Viewer, and Word Processor on initial loading.

```
@page "/"

<PageTitle>Preview PDF and Word files using Blazor PDF Viewer and Word Processor in File Manager</PageTitle>

<div class="control-region">

 <SfFileManager TValue="FileManagerDirectoryContent" ShowThumbnail="true" AllowMultiSelection="false">
    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
    </FileManagerAjaxSettings>
    <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="OpenFilePreview"></FileManagerEvents>
 </SfFileManager>

 <SfDialog Width="100%" Height="100%" EnableResize="true" AllowDragging="true" ShowCloseIcon="true" AllowPrerender="true" Visible="@IsDialogVisible">
   <DialogTemplates>
      <Header> @DialogTitle </Header>
      <Content>
        <div style="display:@PdfVisible">
          <SfPdfViewerServer DocumentPath="@DocumentPath" Height="500px" Width="1000px"></SfPdfViewerServer>
        </div>
        @DialogContent
      </Content>
   </DialogTemplates>
 </SfDialog>

</div>

@code
{
   private bool IsDialogVisible { get; set; } = true;
   private string DialogTitle { get; set; } = "Preview a File";
   private string DialogContent { get; set; } = string.Empty;
   
   private string DocumentPath { get; set; } = "filename.pdf";
   private string PdfVisible { get; set; } = "block";
   
   private void OpenFilePreview(FileOpenEventArgs<FileManagerDirectoryContent> args)
   {
     if (args.FileDetails.Type == ".pdf")
     {
        DialogTitle = "Preview PDF file: " + args.FileDetails.Name;
        PdfVisible = "block";
        DocVisible = "none";
        DialogContent = string.Empty;
        DocumentPath = "wwwroot\\Files" + args.FileDetails.FilterPath + args.FileDetails.Name;
     }
  }

}
```

![Previewing PDF file using Blazor PDF viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Previewing-PDF-file-using-Blazor-PDF-viewer-1.png)

## Integrating Blazor Word Processor to preview Word files

The [Blazor Word Processor component](https://www.syncfusion.com/blazor-components/blazor-word-processor)
 is a tool that allows you to create, edit, view, and print Word documents. To use the Word Processor component, follow this [documentation](https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application)
.

To open a Word document, define a @ref attribute to access the Word Processor instance. Additionally, create a **DocVisible** variable to control the visibility of the Word Processor. Remember to include **@using Syncfusion.Blazor.DocumentEditor** and **@using System.Text.Json** in the ** Imports.razor** component to use the Word Processor component in your Blazor application.

**Note:** Be sure to include the **syncfusion-blazor-documenteditor.min.js** script file in the **_Layout.cshtml** page.

You can obtain a Word extension in **args.FileDetails.Type** of the ** OnFileOpen** event. The code reads the Word file as a FileStream and converts it to a Word document. Then, it opens the document using the ** OpenAsync** method of the Word Processor component.

```
@page "/"

<PageTitle>Preview PDF and Word files using Blazor PDF Viewer and Word Processor in File Manager</PageTitle>

<div class="control-region">
    
  @* File Manager component rendering section*@
  <SfDialog Width="100%" Height="100%" EnableResize="true" AllowDragging="true" ShowCloseIcon="true" AllowPrerender="true" Visible="@IsDialogVisible">
    <DialogTemplates>
       <Header> @DialogTitle </Header>
       <Content>
         @* PDF Viewer component rendering section*@
         <div style="display:@DocVisible">
          <SfDocumentEditorContainer @ref="documentEditorContainer" Height="500px" Width="1000px" EnableToolbar="true">
          </SfDocumentEditorContainer>
         </div>
         @DialogContent
       </Content>
    </DialogTemplates>
  </SfDialog>

</div>

@code
{
    private bool IsDialogVisible { get; set; } = true;
    private string DialogTitle { get; set; } = "Preview a File";
    private string DialogContent { get; set; } = string.Empty;
    
    private string DocumentPath { get; set; } = "filename.pdf";
    private string PdfVisible { get; set; } = "block";
    
    private string DocVisible { get; set; } = "block";
    SfDocumentEditorContainer documentEditorContainer;
    
    private void OpenFilePreview(FileOpenEventArgs<FileManagerDirectoryContent> args)
    {
       if (args.FileDetails.Type == ".docx")
       {
          DialogTitle = "Preview Word file: " + args.FileDetails.Name;
          DocVisible = "block";
          PdfVisible = "none";
          DialogContent = string.Empty;
          this.OpenDocumentEditor("wwwroot\\Files" + args.FileDetails.FilterPath + args.FileDetails.Name);
      }
    }
    
    public void OpenDocumentEditor(string filePath)
    {
        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
        {
            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
            string json = JsonSerializer.Serialize(document);
            document.Dispose();
            document = null;
            documentEditorContainer.DocumentEditor.OpenAsync(json);
            json = null;
        }
     }
}
```

![Previewing word file using Blazor Word Processor](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Previewing-word-file-with-Document-Editor.png)

## Code sample and GitHub resources for implementation

The code sample for this functionality follows. For more information, refer to the complete code on [GitHub](https://github.com/SyncfusionExamples/Blazor-FileManager-Word-PDF)
.

```
@page "/"

<PageTitle>Preview PDF and Word files using Blazor PDF Viewer and Word Processor in File Manager</PageTitle>

<div class="control-region">

 <SfFileManager TValue="FileManagerDirectoryContent" ShowThumbnail="true" AllowMultiSelection="false">
   <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                             UploadUrl="/api/FileManager/Upload"
                             DownloadUrl="/api/FileManager/Download"
                             GetImageUrl="/api/FileManager/GetImage">
   </FileManagerAjaxSettings>
   <FileManagerEvents TValue="FileManagerDirectoryContent" OnFileOpen="OpenFilePreview"></FileManagerEvents>
 </SfFileManager>
    
 <SfDialog Width="100%" Height="100%" EnableResize="true" AllowDragging="true" ShowCloseIcon="true" AllowPrerender="true" Visible="@IsDialogVisible">
   <DialogTemplates>
     <Header> @DialogTitle </Header>
     <Content>
        <div style="display:@PdfVisible">
          <SfPdfViewerServer DocumentPath="@DocumentPath" Height="500px" Width="1060px"></SfPdfViewerServer>
        </div>
        <div style="display:@DocVisible">
          <SfDocumentEditorContainer @ref="documentEditorContainer" EnableToolbar="true">
          </SfDocumentEditorContainer>
        </div>
        @DialogContent
     </Content>
   </DialogTemplates>
 </SfDialog>

</div>

@code
{
    private string DocumentPath { get; set; } = string.Empty;
    private bool IsDialogVisible { get; set; } = false;
    private string PdfVisible { get; set; } = "none";
    private string DocVisible { get; set; } = "none";
    private string DialogTitle { get; set; } = "Preview a File";
    private string DialogContent { get; set; } = string.Empty;
    SfDocumentEditorContainer documentEditorContainer;
    
    private void OpenFilePreview(FileOpenEventArgs<FileManagerDirectoryContent> args)
    {
        if (!string.IsNullOrEmpty(args.FileDetails.Type))
            this.IsDialogVisible = true;
        else
            this.IsDialogVisible = false;
        if (args.FileDetails.Type == ".pdf")
        {
            DialogTitle = "Preview PDF file: " + args.FileDetails.Name;
            PdfVisible = "block";
            DocVisible = "none";
            DialogContent = string.Empty;
            DocumentPath = "wwwroot\\Files" + args.FileDetails.FilterPath + args.FileDetails.Name;
        }
        else if (args.FileDetails.Type == ".docx")
        {
            DialogTitle = "Preview Word file: " + args.FileDetails.Name;
            DocVisible = "block";
            PdfVisible = "none";
            DialogContent = string.Empty;
            this.OpenDocumentEditor("wwwroot\\Files" + args.FileDetails.FilterPath + args.FileDetails.Name);
        }
        else
        {
            DocumentPath = string.Empty;
            PdfVisible = "none";
            DocVisible = "none";
            DialogTitle = "Preview is unavailable";
            DialogContent = "Preview is unavailable or not handled for this file type (" + args.FileDetails.Type + ")";
        }
    }
    
    public void OpenDocumentEditor(string filePath)
    {
        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
        {
            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
            string json = JsonSerializer.Serialize(document);
            document.Dispose();
            //To observe the memory, go down and null out the reference of the document variable.
            document = null;
            //editor = documentEditorContainer.DocumentEditor;
            documentEditorContainer.DocumentEditor.OpenAsync(json);
            //To observe the memory, go down and null out the reference of json variable.
            json = null;
        }
    }

}
```

## Conclusion

In this blog post, we discussed how to preview PDF and Word files in the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)
 using [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer)
 and [Word Processor components](https://www.syncfusion.com/blazor-components/blazor-word-processor)
.

With [Essential Studio® for Blazor](https://www.syncfusion.com/blazor-components)
, you can access over 80 UI components and file-format libraries to build top-notch applications.

If you’re not yet a customer, you can download a [free trial](https://www.syncfusion.com/downloads/blazor/confirm)
 to test our Blazor components.

If you have any questions or concerns, please don’t hesitate to contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always available to assist you. Thank you for your time.

## Related blogs

- [Instantly Update A Real-Time Chart with SignalR in Blazor Server-Side App](https://www.syncfusion.com/blogs/post/instantly-update-a-real-time-chart-with-signalr-in-blazor-server-side-app.aspx)
- [Seamlessly Create a Mind Map Using the Blazor Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-blazor-diagram.aspx)
- [Building an Application For Microsoft Teams with Blazor](https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx)
- [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx)