Displaying thumnail images in file manager instead of icons

[Randy Craven]

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

[Keerthana Rajendran]

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. 

 

Sample link: https://stackblitz.com/edit/hakufu?file=index.ts 

Local service: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider 

 

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. 

 

https://ej2.syncfusion.com/demos/#/material/file-manager/custom-thumbnail.html 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

[Randy Craven]

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

[Sowmiya Padmanaban]

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. 

 

https://www.syncfusion.com/forums/150924/is-it-possible-to-show-thumbnails-for-excel-and-pdf-files-similar-to-images 

 

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. 

 

Sample link : https://stackblitz.com/edit/btgugw-qwknyn?file=index.ts 

 

Service link:  https://www.syncfusion.com/downloads/support/forum/149817/ze/Core_service-1403951846.zip 

 

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	https://ej2.syncfusion.com/demos/#/material/file-manager/overview
UG Documentation	https://ej2.syncfusion.com/documentation/file-manager/getting-started/
API reference	https://ej2.syncfusion.com/documentation/api/file-manager/

  

Please let us know, if you have need any further assistance.  

  

Regards,  

Sowmiya.P 

[Randy Craven]

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

[Muthukrishnan Kandasamy]

 

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. 

 

https://stackblitz.com/edit/js-filemanager-getimage?file=index.js 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[Randy Craven]

That solved the problem.

Thank you very much for your help.

Randy Craven

[Sowmiya Padmanaban]

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