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.

As stated here at the end of his post, why don't you switch to one of the image libraries mentioned in the post instead of using "System.Drawing" (GDI+) which is known to have problems with web applications and services?!

16 July 2019
Helen (DevExpress Support)
Helen (DevExpress Support)
We see that Microsoft and community are working on System.Drawing.Common and improve its cross-platform capabilities. Moreover, it is also quite popular. Thus we decided to stick with this library as well and create a thumbnail generation example based on System.Drawing.Common.
If another library provides all the necessary API and you are more comfortable with it, you can implement the same algorithm using this library. We will definitely appreciate if you share your experience with us :)
17 July 2019
Robin Yao
Robin Yao


but the APIs which you are using is only support windows.

25 April 2022

Please login or register to post comments.