Preview Files in Blazor File Manager: A Comprehensive Guide
Tags: blazor, webdev, word, pdf
Published: 2023-05-18 16:05:17

---
title: Preview Files in Blazor File Manager: A Comprehensive Guide
published: true
date: 2023-05-18 10:45:05 UTC
tags: blazor, webdev, word, pdf
canonical_url: https://www.syncfusion.com/blogs/post/preview-file-blazor-file-manager.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0ke2rx31yaoep7bw81t.png
---
The [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "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 "Blazor PDF Viewer") and [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Blazor Word Processor") components.

Let’s get started!

## Creating a Blazor Server app

Create a [Blazor Server app](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio "Getting Started with Blazor Server Side App in Visual Studio") by utilizing the [Syncfusion Blazor Template Studio extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio "Syncfusion Blazor Template Studio"), and include the Blazor File Manager. You can refer to this [documentation](https://blazor.syncfusion.com/documentation/file-manager/getting-started "Getting Started with Blazor File Manager Component") 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 "Syncfusion Licensing 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:

```csharp
@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>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Blazor-File-Manager-Control-2.png" alt="Blazor File Manager Control" style="width:100%">

  <figcaption>Blazor File Manager Control</figcaption>

</figure>

## Implementing pop-up previews with Blazor Dialog

The [Blazor Dialog component](https://blazor.syncfusion.com/documentation/dialog/getting-started "Getting Started with Blazor Dialog Component") 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 "Getting Started with Blazor Dialog Component").

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

```xml
<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.

```xml
@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:

```xml
<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 "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 "Getting Started with Blazor PDF Viewer Component in Blazor Server App"). 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 "Syncfusion.Blazor.PdfViewerServer.Windows NuGet Package")** 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.

```xml
@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 "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 "Getting Started with Blazor Word Processor Component in Blazor Server").

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.

```xml
@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 "Previewing Word and PDF files using Blazor File Manager GitHub demo").

```xml
@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 "Blazor File Manager ") using [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "Blazor PDF Viewer") and [Word Processor components](https://www.syncfusion.com/blazor-components/blazor-word-processor "Blazor Word Processor").

With [Essential Studio for Blazor](https://www.syncfusion.com/blazor-components "Blazor UI components library"), 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 "Free evaluation of the Essential Studio for Blazor") 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 "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). 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 "Blog: Instantly Update A Real-Time Chart with SignalR in Blazor Server-Side App")
- [Seamlessly Create a Mind Map Using the Blazor Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-blazor-diagram.aspx "Blog: Seamlessly Create a Mind Map Using the Blazor Diagram Component")
- [Building an Application For Microsoft Teams with Blazor](https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx "Blog: Building an Application For Microsoft Teams with Blazor")
- [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx "Blog: Task Scheduling and Markers in Blazor Gantt Chart")