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

Passing keycloak username and token to Download api in file manager

Hey there. 

We have used beforeDownload() function to send keycloak username and token to download api in file manager. As soon as we click the download button, the page gets reloaded within few seconds and we are not able to download the file. So how can we pass keycloak username and token to download api and stop page from reloading. Please find the attached screenshot of the code.



1 Reply

SS Sivakumar ShunmugaSundaram Syncfusion Team October 10, 2022 06:49 AM

Hi Jyoti,


From the shared details, we understand that you want to pass the header value while performing the download operation in the React File Manager component. We would like to let you know that, currently, we do not have direct support for passing the header value while performing a download operation in the FileManager component.


To achieve your requirements as a workaround, we suggest you prevent the default download operation and make a custom download call from client to server as shown in the below code snippet. We have attached the sample and service provider for your reference.


Refer to the below code snippet.

[index.js]

 

export class Overview extends SampleBase {

    hostUrl = 'http://localhost:62869/';

    onbeforeDownload(args) {

      args.cancel = true;

      var obj = {

        action: 'download',

        path: args.data.path,

        names: args.data.names,

        data: args.data.data,

      };

      var xhr = new XMLHttpRequest();

      xhr.open('POST', 'http://localhost:62869/api/FileManager/Download', true);

      xhr.responseType = 'blob';

      xhr.onload = function () {

        if (this.status === 200) {

          var name = '';

          // Getting file name from content-disposition header

          let header = xhr.getResponseHeader('Content-Disposition');

          if (header && header.indexOf('attachment') !== -1) {

            var regex = /name[^;=]*=((['"]).*?\2|[^;]*)/;

            var matches = regex.exec(header);

            if (matches != null && matches[1])

              name = matches[1].replace(/['"]/g, '');

          }

          //saving the file locally using anchor tag

          var blob = new Blob([this.response], {

            type: xhr.getResponseHeader('Content-Type'),

          });

          var anchorUrl = window.URL.createObjectURL(blob);

          if (name) {

            var anchor = document.createElement('a');

            anchor.rel='nofollow' href = anchorUrl;

            anchor.download = name;

            anchor.click();

          } else {

            window.location = anchorUrl;

          }

          setTimeout(function () {

            URL.revokeObjectURL(anchorUrl);

          }, 100);

        }

      };

      var fdata = new FormData();

      fdata.append('downloadInput', JSON.stringify(obj));

      //Custom Header Added to XHR

      xhr.setRequestHeader('Custom-Header', 'TokenValue');

      xhr.send(fdata);

    }

    render() {

      return (

        <div>

          <div className="control-section">

            <FileManagerComponent

              id="overview_file"

              ajaxSettings={{

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

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

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

                downloadUrl: this.hostUrl + 'api/FileManager/Download',

              }}

              beforeSend={this.onBeforeSend.bind(this)}

              beforeDownload={this.onbeforeDownload.bind(this)}

              searchSettings={{ allowSearchOnTyping: false }}

              view={'Details'}

            >

            </FileManagerComponent>

...


[FileManagerController.cs]

 

[Route("Download")]

        public IActionResult Download(string downloadInput)

        {

            var headerValue = Request.Headers["Custom-Header"].ToString();

            Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");

            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput);

            return operation.Download(args.Path, args.Names, args.Data);

        }

 


Sample: https://stackblitz.com/edit/react-vuwczm?file=index.js



Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider1999555932.zip


Please check the attached sample and get back to us if you need any further assistance.


Regards,

Sivakumar S


Loader.
Live Chat Icon For mobile
Up arrow icon