How to open Blazor File Manager images through Image Editor component?

In order to present the image files using the Blazor Image Editor, we have to made modifications to the default Blazor File Manager Image preview dialog. By utilizing the OpenAsync method of ImageEditor component within the OnFileOpen event of File Manager, we have successfully prevented the default File Manager Image preview dialog from appearing and instead opened the chosen image file in the Image Editor component.

We need to include the necessary components and configurations for the SfFileManager, SfDialog, and SfImageEditor. The File Manager component has been configured with the appropriate Ajax settings for file operations, upload, download, and image retrieval.

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

Render Image Editor within Dialog component,

<SfDialog Width="100%" Height="100%" EnableResize="true" AllowDragging="true" ShowCloseIcon="true" AllowPrerender="true" Visible="@IsDialogVisible">
   <DialogTemplates>
       <Header> @DialogTitle </Header>
       <Content>
           <div style="display:@ImageEditorVisible">
               <SfImageEditor @ref="ImageEditor" Height="400">
               </SfImageEditor>
           </div>
       </Content>
   </DialogTemplates>
</SfDialog>

Within the OnFileOpen event handler, we have implemented logic to determine the file type of the selected image. If the file type is “.jpg” or “.png”, we cancel the default behavior, set the dialog visibility to true, and display the Image Editor component.

We then utilize the OpenAsync method of the Image Editor to open the selected image file by providing the file path. If the file is not an image, we hide the dialog and the Image Editor component.

@code{
   SfImageEditor ImageEditor;
   private string DialogTitle { get; set; } = "Preview a File in the ImageEditor";
   private string ImageEditorVisible { get; set; } = "none";
   private bool IsDialogVisible { get; set; } = false;
   private string FileRootPath = "Files";

   private async void OnFileOpen(FileOpenEventArgs<FileManagerDirectoryContent> args)
   {
       if (args.FileDetails.Type == ".jpg" || args.FileDetails.Type == ".png")
       {
           args.Cancel = true;
           this.IsDialogVisible = true;
           this.ImageEditorVisible = "block";
           await Task.Delay(100);
           await ImageEditor.OpenAsync(FileRootPath + args.FileDetails.FilterPath + args.FileDetails.Name);
       }
       else
       {
           this.IsDialogVisible = false;
           this.ImageEditorVisible = "none";
       }
   }
 }

Sample: https://github.com/SyncfusionExamples/Blazor-FileManager-image-preview-through-ImageEditor

Conclusion

I hope you enjoyed learning how to open Blazor File Manager images through Image Editor component.

You can also refer to our Blazor File Manager feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!