ASP.NET Core File Manager – Thumbnail Generator Service

ASP.NET Team Blog
12 July 2019

Our most recent release (v19.1) includes a new ASP.NET Core File Manager control. 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).

DevExpress-ASPNETCore-FileManager

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>()
  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,
          ThumbnailGenerator.AssignThumbnailUrl),
          // ...
       };
       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:
$(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.

DevExpress-ASPNETCore-FileManager

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.


2 comment(s)
Michail
Michail

As stated here https://www.hanselman.com/blog/HowDoYouUseSystemDrawingInNETCore.aspx 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)
@Michail,
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

Please login or register to post comments.