Adding ToolTip or Dialog to FileManager

[Randy Craven]

Hello,

When users upload a video file, our system creates a series of thumbnail images (ten images at one-second intervals).  We would like to offer the feature of allowing users to select a thumbnail to be used for each video, when viewing files in a FileManager control.  

Our idea is to add an item to the context menu for video files, that would show the available thumbnail images and allow the user to choose one.  From our perspective, a ToolTip or Dialog control would work for this.

It is possible to display a ToolTip or Dialog within a FileManager control, or other control that can display a list of thumbnail images?

Thank you,

Randy Craven

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Randy Craven,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component. 

 

Query 1- Load thumbnail image for Mp4 video. 

 

We have already faced the similar requirement with FileManager component. You can load the thumbnail image by using fileLoad event of FileManager component. 

 

Refer the below forum for your requirement. 

 

http://www.syncfusion.com/forums/149817  

 

Query 2- Add an item to the context menu for video files. 

 

You can add the item using contextMenuSettings of FileManager component based on file type.  

 

Refer the below code snippet. 

 

https://ej2.syncfusion.com/documentation/file-manager/how-to/adding-custom-item-to-context-menu/  

 

Query 3: is possible to display a ToolTip or Dialog within a FileManager control, or other control that can display a list of thumbnail images? 

 

We will check the feasibility of this requirement and update you the solution details in two business days on 6^th October 2020. 

 

We appreciate your patience. 

 

Regards, 

Shameer Ali Baig S. 

[Sowmiya Padmanaban]

Hi Randy Craven,  

 

Thanks for the patience. 

 

Query 1: is possible to display a Dialog within a FileManager control 

 

You can open the dialog by clicking the items in context menu of FileManager component. MenuClick event is triggered when clicking the menu items.   

 

Refer the below code snippet. 

 

    let fileObject: FileManager = new FileManager({ 

        ajaxSettings: { 

            url: hostUrl + 'api/FileManager/FileOperations', 

            getImageUrl: hostUrl + 'api/FileManager/GetImage', 

            uploadUrl: hostUrl + 'api/FileManager/Upload', 

            downloadUrl: hostUrl + 'api/FileManager/Download' 

        }, 

        view: 'Details', 

        contextMenuSettings: { 

        file: ["Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details"], 

        folder: ["Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details"], 

        layout: ["Custom", "SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll"], 

        visible: true 

    }, 

        menuClick: menuClick 

    }); 

    fileObject.appendTo('#filemanager'); 

 

    function menuClick(args){ 

        if(args.item.text == "Custom"){ 

            dialog.show(); 

        } 

    } 

 

Refer the below sample link. 

 

https://stackblitz.com/edit/87qg1s?file=index.ts 

 

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

 

Regards,  

Sowmiya.P