File Manager - How to generate thumbnails for images on server

This examples shows how to generate and show thumbnails for image files. The thumbnail generation is implemented in a custom service that returns the thumbnail URLs in ClientFileSystemItem's custom fields. The thumbnails are rendered on the client side in the customizeThumbnail method, similar to the FileManager - Custom Thumbnails demo.

Follow these steps:

1. Add the FileManager to your page and setup it on the client side.

2. Set the fileProvider.endpointUrl option so that it points to your API controller.

3. Copy the service implementation from the ThumbnailGeneratorService.cs file. It uses the System.Drawing.Common library that supports .NET Core: System.Drawing.Common - Release Notes.

4. Register the service in Startup.cs:

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

5. To use the service, create a method in your API Controller that will handle the File Manager operations and inject the service via Dependency Injection in the following way:

        public FileManagerApiController(IHostingEnvironment environment, IThumbnailGeneratorService thumbnailGenerator) {
            Environment = environment;
            ThumbnailGenerator = thumbnailGenerator;
        }
        IThumbnailGeneratorService ThumbnailGenerator { get; }
        public IActionResult FileSystem(FileSystemCommand command, string arguments) {
            var rootPath = Path.Combine(Environment.WebRootPath, "ContentFolder");
            var config = new FileSystemConfiguration {
                Request = Request,
                FileSystemProvider = new DefaultFileProvider(rootPath, ThumbnailGenerator.AssignThumbnailUrl)
            };
          ...
        }

6. On the client side, use the customizeThumbnail method and get the passed thumbnailUrl from fileManagerItem.dataItem:

 customizeThumbnail: function (fileManagerItem) {
    return fileManagerItem.dataItem ? fileManagerItem.dataItem.thumbnailUrl : null;
}

NOTE On Unix-based systems, you may get 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. To solve the problem, install gdi+ using the following command:

brew install mono-libgdiplus