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. Connect the File Manager to your API Controller via the Remote file system provider:

@(Html.DevExtreme().FileManager()
    .ID("file-manager")
    .FileSystemProvider(p=>
        p.Remote().Url(Url.Action("FileSystem", "FileManagerApi"))
    )

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(IWebHostEnvironment environment, IThumbnailGeneratorService thumbnailGenerator) {
            Environment = environment;
            ThumbnailGenerator = thumbnailGenerator;
        }

        IWebHostEnvironment Environment { get; }
        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 PhysicalFileSystemProvider(rootPath, ThumbnailGenerator.AssignThumbnailUrl),
                ...
            };
            ...
        }

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

...
.CustomizeThumbnail("OnCustomizeThumbnail")

  function OnCustomizeThumbnail(fileManagerItem) {
        console.log(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

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)