ASP.NET Core File Manager - Thumbnail Generator Service

ASP.NET Team Blog
12 July 2019

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:

    .AddSingleton<IActionContextAccessor, ActionContextAccessor>()
    .AddSingleton<IThumbnailGeneratorService, ThumbnailGeneratorService>()
  1. С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,
          // ...
       var processor = new FileSystemCommandProcessor(config);
       var result = processor.Execute(command, arguments);
       return Ok(result.GetClientCommandResult());
  1. Assign a custom icon URL to each File Manager item in the customizeThumbnail method:
       // ...
       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+.


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

brew install mono-libgdiplus


We'd love to hear your feedback.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.