Thumbnail Image Compression Support

3 Sep 20205 minutes to read

The “FileExplorer” allows thumbnail images to be compressed on the server side and loaded into the “FileExplorer” layout to improve performance when working with large size images.

You can enable this option using “EnableThumbnailCompress” API of FileExplorer. For enabling this API, showThumbnail must be set to true in order to render thumbnail preview of images in Tile and LargeIcons layout.

The beforeGetImage event is triggered before loading a requested image from the server and getImage event is triggered after the requested image is loaded.

Refer following code block that will be helpful to you.

In the view page, add “FileExplorer” helper and specify the thumbnail image compress option as specified below.

  • RAZOR
  • @(Html.EJ().FileExplorer("fileExplorer")
                .Layout(LayoutType.Tile)
                .Path("~/FileExplorerContent/")
                .AjaxAction(@Url.Content("FileActionThumbnailCompress"))
                .EnableThumbnailCompress(true)
        )

    In the controller page, specify the “GetImage” handling operation as shown below. This handling function is necessary to compress and load the images in “FileExplorer”, while “EnableThumbnailCompress” option has been enabled.

  • C#
  • public ActionResult FileActionThumbnailCompress(FileExplorerParams args)
                {
                    FileExplorerOperations operation  = new FileExplorerOperations();
                    switch (args.ActionType)
                    {
                        case "Read":
                            return Json(operation.Read(args.Path, args.ExtensionsAllow));
                        case "CreateFolder":
                            return Json(operation.CreateFolder(args.Path, args.Name));
                        case "Paste":
                            return Json(operation.Paste(args.LocationFrom, args.LocationTo, args.Names, args.Action, args.CommonFiles));
                        case "Remove":
                            return Json(operation.Remove(args.Names, args.Path));
                        case "Rename":
                            return Json(operation.Rename(args.Path, args.Name, args.NewName, args.CommonFiles));
                        case "GetDetails":
                            return Json(operation.GetDetails(args.Path, args.Names));
                        case "Download":
                            operation.Download(args.Path, args.Names);
                            break;               
                        case "Upload":
                            operation.Upload(args.FileUpload, args.Path);
                            break;
                        case "Search":
                            return Json(operation.Search(args.Path, args.ExtensionsAllow, args.SearchString, args.CaseSensitive));
                        case "GetImage":
                            //Helps to reduce thumbnail image size before loading it into FileExplorer
                            operation.GetImage(args.Path, args.CanCompress);
                            break;
    
                    }
                    return Json("");
                }