File Explorer Image preview customisation

[Petr]

Hello,

I'm looking for a way to customize the look of modal image preview in File Manager component. 

I would like to:

1. set a larger default size of image preview window (preferably not limited to the file manager area)
2. display the images in their natural aspect ratio, not simply deformed to fit the square
3. go through the images in folder inside of the preview mode with left/right arrow key, the same way we can do it in folder.

Is it possible to achieve any of these things? 

Thank you for sharing your expertise.

Best regards,

Petr

[Sowmiya Padmanaban]

Hi Peter, 

 

Greetings from Syncfusion support. 

 

We have checked your requirement with FileManager component  (move the next and previous image using button) . Currently, we have checking the feasibility of achieving your requirement with FileManager component. We will update the validation details within five business days on 14^th December 2020. 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P  

[Petr]

Dear Sowmiya,

thank you for your response and your efforts.

What about my questions number 1 (larger default size of image preview window) and 2 (images in their natural aspect ratio)? 

Is it possible to achieve these?

Thank you,

Petr

[Keerthana Rajendran]

Hi Petr, 

 

Sorry for the inconvenience.  

 

Currently we are preparing sample to achieve your below requirements with FileManager 

 

1. Larger default size of image preview window
2. Image in their natural aspect ratio.
3. Go through the images with arrow keys.

 

We will check the feasibility to achieve the above three requirements and update you the sample with possible solution on 14^th December, 2020 as promised earlier. 

 

Regards, 

Keerthana.  

[Sowmiya Padmanaban]

Hi Petr,  

 

Thanks for your patience. 

 

We have prepared a sample based on your requirement. You can change the popup target using BeforePopUpOpen event and also add the next/previous button inside the preview image. 

 

Please, refer the below code snippet. 

 

 

    @Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 

{ 

    Url = "/Home/FileOperations", 

    GetImageUrl = "/Home/GetImage", 

    UploadUrl = "/Home/Upload", 

    DownloadUrl = "/Home/Download" 

}).View(Syncfusion.EJ2.FileManager.ViewType.Details).BeforePopupOpen("beforeOpen").ShowThumbnail(false).FileLoad("fileLoad").FileOpen("fileOpen").Render() 

 

    function beforeOpen(args) { 

        if (args.popupName == "Image Preview") {    

            if (args.popupModule.target == "BODY") { 

                var element = args.popupModule.dlgContainer.querySelector( 

                    ".e-dlg-header-content" 

                ); 

                // Create a two button in dialog component. 

                var newItem = document.createElement("BUTTON"); 

                newItem.setAttribute("class", "next"); 

                newItem.appendChild(document.createTextNode("Next")); 

                var newItem1 = document.createElement("BUTTON"); 

                newItem1.setAttribute("class", "previous"); 

                newItem1.appendChild(document.createTextNode("previous")); 

                element.insertBefore(newItem, element.children[2]); 

                element.insertBefore(newItem1, element.children[2]); 

                newItem.addEventListener("click", Next_button.bind(this)); 

                newItem1.addEventListener("click", Next_button.bind(this)); 

            } 

            if (args.popupModule.target !== "BODY") { 

                args.cancel = true; 

                args.popupModule.target = "BODY"; 

                args.popupModule.minHeight = "200px"; 

                args.popupModule.dataBind(); 

            } 

        } 

    } 

 

 

You can change the image URL by clicking the next/previous button. Please, refer the below code snippet. 

 

    function Next_button(args) { 

        //fetch the image element in dialog. 

        var image_element = document.querySelector(".e-image"); 

        // split the image src. 

        var src_array = (image_element).src.split("&")[0].split("/"); 

        // fetch the file name in src url. 

        var image_value = image_array.indexOf(src_array[src_array.length - 1]); 

        // check if the button is next or previous. 

        if (args.target.innerText == "Next") { 

            var next_data = image_array[image_value + 1]; 

            if (next_data) { 

                // update the dialog title when changing the data. 

                document.querySelector( 

                    "#file_img_dialog_title" 

                ).innerHTML = next_data; 

                src_array[src_array.length - 1] = next_data; 

                // changing the alt data of corresponding image. 

                (image_element).alt = image_array[image_value + 1]; 

            } 

        } else if (args.target.innerText == "previous") { 

            var previous_data = image_array[image_value - 1]; 

            if (previous_data) { 

                document.querySelector( 

                    "#file_img_dialog_title" 

                ).innerHTML = previous_data; 

                src_array[src_array.length - 1] = previous_data; 

                (image_element).alt = previous_data; 

            } 

        } 

        // changing the src value of corresponding image. 

        (image_element).src = src_array.join().replaceAll(",", "/"); 

    } 

 

Please, refer the below sample link for your requirement. 

 

https://www.syncfusion.com/downloads/support/forum/160420/ze/FileManager-2096064076.zip 

 

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

 

Regards,  

Sowmiya.P