File Explorer Image preview dialog size

[Davy]

Hello,

does the FileManager component offer any options to control the Image Preview dialog width and height?

[Prasanth Madhaiyan]

Hi Davy,

Greetings from Syncfusion support.

We have validated your reported query in the Blazor FileManager component by preparing the sample. We understand that you want to increase the Image Preview dialog width and height in the Blazor FileManager component. You can achieve this requirement by customizing the popup in the BeforePopupOpen event with the help of a JS interop call.

Refer to the below code snippet.

[Index.razor]

 

<SfFileManager TValue="FileManagerDirectoryContent">

    <FileManagerAjaxSettings Url=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations

                                UploadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload

                                DownloadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download

                                GetImageUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage>

    </FileManagerAjaxSettings>

    <FileManagerEvents TValue="FileManagerDirectoryContent" BeforePopupOpen="BeforePopupOpen" ></FileManagerEvents>

</SfFileManager>

 

 

@code {

 

    public async void BeforePopupOpen(BeforePopupOpenCloseEventArgs args)

    {

        if (args.PopupName == "Image Preview")

        {

            await JsRuntime.InvokeAsync<object>("select");

        }

    }

}

 

[_Layout.cshtml]

 

<script>

    function select() {

        document.getElementsByClassName("e-dialog")[1].style.width = "500px"

        document.getElementsByClassName("e-dialog")[1].style.height = "500px"

    }

</script>

 

For your reference, we have attached the sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorFileManager1-1563751126.zip

Check out the shared sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.