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:
- Add the FileManager to your page and setup it on the client side.
- 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"))
)
-
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.
-
Register the service in Startup.cs:
services
.AddSingleton<IActionContextAccessor, ActionContextAccessor>()
.AddSingleton<IThumbnailGeneratorService, ThumbnailGeneratorService>();
- 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),
...
};
...
}
- 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