We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Displaying thumnail images in file manager instead of icons

Displaying thumnail images in file manager instead of icons

Hello,

We are working on a File Manager implementation where the files displayed will be media files -- images, videos, and PDF's.

Instead of an icon for each file, we would like to display a thumbnail image representing the actual file.  We would generate the thumbnails ourselves.  

For example if the files were myimage.jpg, mypdf.pdf, and myvideo.mp4, we would have myimage_thumb.jpg, mypdf_thumb.jpg, and myvideo_thumb.jpg; and we would like to show those images in the file manager as the icon for those files.

Is this possible?  And if so, is there a code snippet illustrating how this might be done?

thank you,
Randy Craven

7 Replies
KR Keerthana Rajendran Syncfusion Team December 11, 2019 09:36 AM UTC

Hi Randy, 
 
Thanks for contacting Syncfusion support. 
 
Yes, you can add custom icons to the file manager component based on your requirement. In file manager component, we can add generic class based on file extension. You can add the custom icons based on your extension.  
  
In file manager component,.e-large-icons class is added for large icons view and .e-grid class for details view. After that you can add “.e-fe-” and your extension( for example “.e-fe-pdf”). In that case, you can add custom icons for any extension.  
 
Refer the below code snippet for adding custom icons in grid and large icons view.  
/* For largeicons view*/  
.e-filemanager .e-large-icons  .e-fe-pdf {  
/*set your background image*/  
  background-image:   
}  
/* For grid view*/  
.e-filemanager .e-grid .e-fe-pdf {  
/*set your background image*/  
  background-image:   
}  
 /*For image*/ 
.e-filemanager .e-grid .e-fe-image, .e-filemanager .e-large-icons  .e-fe-image { 
/*set your background image*/  
  background-image:   
} 
  
For your reference, we have prepared a sample using local service, because no files are displayed in online service. 
 
 
Note: Run the local service and refer the local host URL in file manager sample. 
 
To know more about the custom thumbnails. Refer the below link. 
 
 
Please let us know, if you have any concerns. 
 
Regards, 
Keerthana. 


RC Randy Craven September 8, 2020 05:55 PM UTC

Hello,

I would like to follow up on this thread and ask if thumbnail images of the actual file can be displayed for the following file types: MP4 and PDF.

I see that for JPG and other image files, a thumbnail of the actual image can be displayed.  Is it possible to do this for MP4 and PDF files, assuming we have previously created a JPG thumbnail images corresponding to each file?

Thank you,
Randy Craven

SP Sowmiya Padmanaban Syncfusion Team September 10, 2020 10:13 AM UTC

Hi Randy Craven,  
 
Query1 – Display the image in PDF files. 
 
We’ve already faced a similar requirement query on FileManager component. In the following forum, we have load the first page of the PDF, Excel  and Document files as thumbnail image in FileManager view. Please, check whether this solution meet your requirement.  
 
Please, refer the below forum link for your requirement. 
 
 
Query 2- Display the image in Mp4 files. 
 
When setting showThumbnail property as false, FileManager will display custom thumbnails,  instead of loading preview images for image type files (.jpg, .png, etc) 
 
If you want to load custom thumbnail image for video file(mp4) in FileManager, then you can use its fileLoad event to achieve your requirement. 
 
Please, refer the following code sample in which we insert the custom thumbnail image for video file in the file load event. 
 
 fileLoad: function(args:FileLoadEventArgs){ 
        if(args.module == "LargeIconsView" && (args.fileDetails as any).type == ".mp4"){ 
            args.element.firstElementChild.removeChild(args.element.querySelectorAll(".e-list-icon.e-fe-video")[0]); 
            let dynamicImgEle: Element = createElement('img', { className: "e-list-img", 
            attrs:{src: getImageUrl(fileObject,args.fileDetails) }}); 
            args.element.firstElementChild.insertBefore(dynamicImgEle, args.element.firstElementChild.querySelectorAll(".e-list-text")[0]); 
        } 
    } 
 
It will trigger the GetImage method in controller side, from that method, you can send the custom image for mp4 back to client side to achieve your requirement. 
 
[Route("GetImage")] 
        public IActionResult GetImage(FileManagerDirectoryContent args) 
        { 
            if (args.Path.Contains(".mp4")) 
            {       
                return this.operation.GetImage("/Pictures/syncfusion-videos-fb.png", null, false, null, null); 
            } 
            else 
            { 
                return this.operation.GetImage(args.Path, args.Id, false, null, null); 
            } 
        }   
 
When double clicking the Video file, fileOpen event will trigger, you can load the Video file using any external component or HTML element based on your requirement.  
  
Please, refer the below the solution sample and service link. 
 
 
 
Note: Run the service and refer the localhost URL in FileManager sample. 
 
Please, refer the following links to know more about the FileManager component. 
  
Demo link 
 
UG Documentation 
 
API reference 
 
  
Please let us know, if you have need any further assistance.  
  
Regards,  
Sowmiya.P 


RC Randy Craven September 16, 2020 08:44 PM UTC

Hello,

Thank you for your message and code samples.

Having added the sample code to my project, what I find is that the browser is creating the URL for MP4 file thumbnails not calling the GetImage controller method.

Could you suggest why this might be happening?

The attached document has screen shots showing the getImageUrl function (in the fileLoad event) being called and creating an image URL.  Also is a screen shot showing the browser calling the controller for JPG files but not MP4.  

Also in the document is my code for FileManger instantiation and the getImageUrl function.  Note: we use JavaScript, not TypeScript, so I modified the Syncfusion code sample slightly for my project.

Thank you,
Randy Craven

Attachment: Syncfusion_Video_Thumbnails_20200916_1a306312.zip

MK Muthukrishnan Kandasamy Syncfusion Team September 17, 2020 12:42 PM UTC

 
Hi Randy, 
 
Thanks for the update. 
 
We have validated your reported problem in File Manager component with your shared details. We have found that in your shared code, you have used the same method which is used in the TypeScript application for creating the image element.  
 
For resolving your reported problem, we need to use general JavaScript method to create the image element. Please refer to the below code block. 
 
var dynamicImgElement = document.createElement('img'); 
 dynamicImgElement.src = getImageUrl(fileObject,args.fileDetails); 
  dynamicImgElement.className = "e-list-img"; 
 
 
We have modified the sample in pure JavaScript for your convenience, please refer to the below link for the sample. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


RC Randy Craven September 17, 2020 04:14 PM UTC

That solved the problem.

Thank you very much for your help.
Randy Craven

SP Sowmiya Padmanaban Syncfusion Team September 18, 2020 07:00 AM UTC

Hi Randy, 
  
We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon