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

Download indicator in File Manager

How to implement file downloading indicator in file manager? I need a file download progress indicator in order to know how long it takes to wait for the file to download.


1 Reply

SS Sivakumar ShunmugaSundaram Syncfusion Team December 9, 2022 04:22 PM UTC

Hi Kostya,


Greetings from Syncfusion support.


We understand that you want to implement the file downloading indicator in the FileManager component. But currently, we do not have an event to capture the download success from our side. To meet your requirements, we recommend displaying the spinner in the beforeDownload
event and hiding the snipper after a fixed amount of time. We have attached the prepared sample for your reference.


Refer to the below code snippet.

[Index.cshtml]

 

        <ejs-filemanager id="filemanager" beforeDownload="onbeforeDownload">

            <e-filemanager-ajaxsettings url="/Home/FileOperations"

                                        downloadUrl="/Home/Download"

                                        uploadUrl="/Home/Upload"

                                        getImageUrl="/Home/GetImage">

            </e-filemanager-ajaxsettings>

        </ejs-filemanager>

<script>

    function onbeforeDownload(args){

        ej.popups.createSpinner({

      target: document.getElementsByClassName(

        'e-large-icons'

      )[0],

    });

    ej.popups.showSpinner(

      document.getElementsByClassName('e-large-icons')[0]

    );

    //Based on file size you can set the setTimeout

    if (args.data.data[0].size < 20971520) {

      setTimeout(function () {

        ej.popups.hideSpinner(

          document.getElementsByClassName('e-large-icons')[0]

        );

      }, 1000);

    } else {

      setTimeout(function () {

        ej.popups.hideSpinner(

          document.getElementsByClassName('e-large-icons')[0]

        );

      }, 10000);

    }

    }

</script>


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FileManager_(12)-2073346228.zip


Check out the attached sample for your reference.


Loader.
Live Chat Icon For mobile
Up arrow icon