ASP.NET Core File Manager - Thumbnail Generator Service

Our most recent release (v19.1) includes a new File Manager control that ships as part of the DevExpress ASP.NET Core UI Library. Though the component is currently available as a Community Tech Preview (CTP), our customers tell us they’ve already put the control to use in real applications.

In this post, I’ll demonstrate how you can enable preview thumbnails for image files within the ASP.NET Core File Manager control.

Preview Thumbnails

Image thumbnails are important UI elements within all modern file explorers (be it Explorer on PCs or Finder on Macs).

At present, our File Manager displays default thumbnails for all files. We will support preview thumbnails in a future release. If you’re already using the File Manager in your web app, you can introduce image previews via our Thumbnail Generator service. Simply add it to your project to enable image previews.

Under the Hood

The ThumbnailGeneratorService.cs file contains the code needed to generate custom thumbnails. We use the System.Drawing.Common library to create icons based on your image files.

How to Install

1. Add the ThumbnailGeneratorService.cs file to your ASP.NET Core Web Application without any modifications.

2. Register the service in the Startup.cs file:

services
    .AddSingleton<IActionContextAccessor, ActionContextAccessor>()
    .AddSingleton<IThumbnailGeneratorService, ThumbnailGeneratorService>()

3. Сreate a new method (e.g. FileSystem) in a controller to inject the ThumbnailGenerator service using Dependency Injection:

public IActionResult FileSystem(FileSystemCommand command, string arguments) {
  var config = new FileSystemConfiguration {
      FileSystemProvider = new DefaultFileProvider(rootPath,
          ThumbnailGenerator.AssignThumbnailUrl),
          // ...
       };
       var processor = new FileSystemCommandProcessor(config);
       var result = processor.Execute(command, arguments);
       return Ok(result.GetClientCommandResult());
 }

4. Assign a custom icon URL to each File Manager item in the customizeThumbnail method:

$(function(){
    $("#fileManagerContainer").dxFileManager({
       // ...
       customizeThumbnail: function (fileManagerItem) {
          return fileManagerItem.dataItem ? fileManagerItem.dataItem.thumbnailUrl : null;
       }
    });
});

You should now see image thumbnails within the DevExpress File Manager control.

Unix-based Systems

If you encounter the "System.TypeInitializationException: The type initializer for 'Gdip' threw an exception. ---> System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found" exception, please install GDI+.

MacOS

For MacOS systems, call the following command into terminal to install GDI+:

brew install mono-libgdiplus

Survey

We'd love to hear your feedback.

Free DevExpress Products – Get Your Copy Today