Thumbnails
- 2 minutes to read
Image Thumbnails
FileManager automatically creates thumbnails for image files with the following file extensions:
- bmp
- gif
- ico
- jpg
- jpeg
- png
For better performance, these content-based thumbnails are stored in the location specified via the FileManagerSettings.ThumbnailFolder (via the FileManagerSettings.Settings.ThumbnailFolder) property.
Note
The folder that contains thumbnails must be placed physically inside the application folder.
Default Thumbnails
FileManager provides the default thumbnails for some file types listed below.
File Extension | Default Thumbnail |
---|---|
txt | |
rtf doc docx odt | |
xls xlsx ods | |
ppt pptx odp | |
other extensions, where thumbnails are not defined |
You can change the last thumbnail via the FileManagerImages.File (via the FileManagerSettings.Images.File) property.
Custom Thumbnails
In addition to an automatically created and default thumbnails, FileManager allows you to provide custom thumbnails by handling the server-side FileManagerSettings.CustomThumbnail event. This event allows you to define a custom manner in which all or certain files should be visually represented in folders. Within the event’s handler, a currently processed item can be accessed and identified by using the FileManagerThumbnailCreateEventArgs.Item property, and a custom thumbnail can be defined for the file via the FileManagerThumbnailCreateEventArgs.ThumbnailImage property.
In the example below, the CustomThumbnail event is handled to analyze file extensions and represent each file type using the corresponding custom thumbnail image.
View code:
@model string
@Html.DevExpress().FileManager(settings =>
{
settings.Name = "FileManager";
settings.CallbackRouteValues = new { Controller = "Home", Action = "FileManagerPartial" };
settings.Settings.ThumbnailFolder = Url.Content(@"~/Content/Thumbnails");
settings.CustomThumbnail = (s, e) =>
{
switch(((FileManagerFile)e.Item).Extension)
{
case ".avi":
e.ThumbnailImage.Url = @"~/Images/movie.png";
break;
case ".zip":
e.ThumbnailImage.Url = @"~/Images/archive.png";
break;
case ".txt":
e.ThumbnailImage.Url = @"~/Images/txt.png";
break;
case ".rtf":
e.ThumbnailImage.Url = @"~/Images/richtxt.png";
break;
case ".mp3":
e.ThumbnailImage.Url = @"~/Images/music.png";
break;
case ".xml":
e.ThumbnailImage.Url = @"~/Images/code.png";
break;
}
};
settings.SettingsFileList.View = DevExpress.Web.FileListView.Thumbnails;
}).BindToFolder(Model).GetHtml()