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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How To Implement JWT Token Send With Every FileManager Request

Thread ID:

Created:

Updated:

Platform:

Replies:

144270 Apr 27,2019 07:29 PM UTC Jun 23,2020 04:33 PM UTC Angular - EJ 2 18
loading
Tags: FileManager
Jason Osborne
Asked On April 27, 2019 07:29 PM UTC

So after a few hours of trying to get the beforeSend event to work properly, I have given up. Could you provide an example of proper implementation?

Background: Angular 7 front end that communicates with a Asp.Net Core 2.1 Web Api. Security uses JWT token.

file-explorer.component.html

<ejs-filemanager id='default-filemanager' #filemanagerObj [ajaxSettings]='ajaxSettings' (beforeSend)="beforeSend($event)" allow-drag-and-drop="true"></ejs-filemanager>

file-explorer.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';

const token = localStorage.getItem('token');

@Component({
selector: 'app-file-explorer',
templateUrl: './file-explorer.component.html',
styleUrls: ['./file-explorer.component.css']
})
export class FileExplorerComponent implements OnInit {
baseUrl = environment.apiUrl;
public hostUrl: string = this.baseUrl;
public ajaxSettings: object = {
url: this.hostUrl + 'AzureStorage/FileOperations',
getImageUrl: this.hostUrl + 'AzureStorage/GetImage',
uploadUrl: this.hostUrl + 'AzureStorage/Upload',
downloadUrl: this.hostUrl + 'AzureStorage/Download',
}

constructor() { }

ngOnInit() {
}

beforeSend(args: any){
args.setRequestHeader("Authorization","Bearer" + token);
}
}

How do I set the Authorization header properly in the beforeSend event?

Thanks in advance for your help.


Christopher Issac Sunder K [Syncfusion]
Replied On April 29, 2019 09:30 AM UTC

Hi Jason, 

Greetings from Syncfusion support. 

Currently, the EJ2 File Manager does not have support to receive and modify the JWT tokens in the beforeSend event. We have logged this as a feature request from our end. We will provide support for this and include it in the weekly patch release on 3rd week of May, 2019. You can track the status of this feature through the following feedback portal link, 

We appreciate your patience until then. 

Thanks, 
Christo 


Christopher Issac Sunder K [Syncfusion]
Replied On May 22, 2019 10:57 AM UTC

Hi Jason, 

Thanks for being patient. 

We have provided the support to receive and modify the JWT tokens in the ajax beforeSend event and have included this in our latest Syncfusion packages(version - 17.1.48). Please update the Syncfusion packages to the latest version(v17.1.48) to include this support.  

You can access the ajax beforeSend event in the beforeSend event of the File Manager and set authorization header there. Please check below code snippet, 
<ejs-filemanager id='overview' (beforeSend)="beforeSend($event)" [ajaxSettings]='ajaxSettings' [view]='view'> 
</ejs-filemanager> 
 
//File Manager's beforeSend event 
beforeSend(args: any){ 
    //Ajax beforeSend event 
    args.ajaxSettings.beforeSend = function (args) { 
        //Setting authorization header 
        args.httpRequest.setRequestHeader("Authorization", "Bearer-1233") 
    } 
} 

We have prepared a sample for your reference. Please find it below, 

Let us know if you have any concerns. 

Thanks, 
Christo 


Jason Osborne
Replied On May 22, 2019 01:41 PM UTC

Christo,

Thank you for the update. I will test this later today.

Christopher Issac Sunder K [Syncfusion]
Replied On May 23, 2019 10:07 AM UTC

Hi Jason, 

Thanks for the update. We will wait until we hear from you. 

Thanks,
Christo 


acid blue
Replied On May 29, 2019 01:35 PM UTC

I have succesfully tested the FileManager with JWT with v17.1.48 but on the GetImage and Download calls don't send JWT token because the args.ajaxSettings.beforeSend function isn't called.

Is this a bug?

Christopher Issac Sunder K [Syncfusion]
Replied On May 31, 2019 12:08 PM UTC

Hi Jason, 
 
We have processed the operations in File Manager using ajax except for GetImage, Download, and Upload operations. 
 
For GetImage, instead of Ajax, we have processed it using query string parameter and similarly, for download, we have used form element to process the operation. As these operations are not based on ajax requests, we have not provided the beforeSend event for them. 
 
However, we will further validate and check the feasibility of implementing ajax requests to process these operations and provide you the further details for this on 3rd June 2019. 
 
We appreciate your patience until then. 
 
Thanks,
Christo
 


Ashokkumar Balasubramanian [Syncfusion]
Replied On June 4, 2019 04:55 AM UTC

Hi Jason, 
 
Thanks for your patience. 
 
We checked the feasibility for implementing this requirement, but as mentioned in our previous update since the GetImage is processed using query string parameter and download processed using form element. So, it is not possible to implement these operations using Ajax requests. However, as it is possible to implement the upload operation using ajax request, we will include support for this. 
 
Please let us know if you have any concerns. 
 
Regards, 
Ashokkumar B. 


Ashokkumar Balasubramanian [Syncfusion]
Replied On October 8, 2019 04:26 PM UTC

Hi Jason,  
 
Query1 – Header for Upload and FileOperations. 
 
We have provided the support to receive and modify the JWT tokens in the ajax beforeSend event for upload and fileOperations. You can access the ajax beforeSend event in the beforeSend event of the File Manager and set authorization header. Refer the below code snippet to set the header for upload and fileOperations. 
 
 <ejs-filemanager   #filemanager id='overview' [ajaxSettings]='ajaxSettings'   (beforeSend)="beforeSend($event)" [view]='view'  (toolbarClick)='toolbarClick($event)' (menuClick)='menuClick($event)'> 
        </ejs-filemanager> 
 
  beforeSend(args: any) { 
    //Ajax beforeSend event 
    args.ajaxSettings.beforeSend = function (args) { 
      //Setting authorization header 
      args.httpRequest.setRequestHeader("Authorization", "Bearer-1233") 
    } 
  } 
 
 
 
Query 2 - Authorisation header in download request 
 
Currently, we have used the form option for download a file from the file manager. Here, you are unable to add the authorisation header. To achieve your requirement, we need to use the XHRHttpRequest to download the file from the server. Using the XHRHttpRequest approach for downloading, it will download the file into browser cache once before saving the file locally. This will slow down the download process, since double the time file will be downloaded also it utilizes more bandwidth. Due to that, we couldn’t include this support in component level. 
 
However, as a workaround, we have achieved your requirement by preventing the default file manager download operation and added the custom download using XHRHttpRequest. Please refer the below code example. 
 
[Controller] 
 
Route("Download")] 
        public IActionResult Download(string downloadInput) 
        { 
            // To expose content disposition header at client side. 
            Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition"); 
            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput); 
            return operation.Download(args.Path, args.Names); 
        } 
 
 
[TS] 
 
public toolbarClick(args: any): void { 
    if (args.item.id === this.filemanagerObj.element.id + '_tb_download') { 
      //Preventing default download using toolbar 
      args.cancel = true; 
      this.customDownload([]); 
    } 
  } 
  public menuClick(args: any) { 
    if (args.item.id === this.filemanagerObj.element.id + '_cm_download') { 
      //Preventing default download using context menu 
      args.cancel = true; 
      this.customDownload(args.fileDetails); 
    } 
  } 
  public customDownload(files) { 
    var flag = (this.filemanagerObj.selectedItems.length !== 0); 
    if ((files.length !== 0) || flag) { 
      //Creating data for the controller 
   ..... 
   ..... 
      let fdata: FormData = new FormData(); 
      fdata.append('downloadInput', JSON.stringify(data)); 
      //Custom Header Added to XHR 
      xhr.setRequestHeader('Custom-Header', 'Syncfusion'); 
      xhr.send(fdata); 
    } 
  } 
 
 
For your reference, we have prepared file operation services based on your requirement in below-mentioned link:  
 
 
a.     Extract the downloaded file operation services. 
b.     Run the service and copy the hosted URL. 
c.      Enter the hosted URL in below sample. 
 
 
Query 3 – Header request for GetImage 
 
We are using the query string parameter to load the images in file manager. So, we are unable to add the custom header in GetImage request. If we are going to use ajax (asynchronous request) then, each image creates individual request and its having certain time delay based in image size, network bandwidth and server respond time. So, we are unable to update the headers to the corresponding image tag value. Also, in search operations the images will be listed from different folders for each keypress, this will creates more request and increases the complexity to update the image tag values. 
  
Regarding this, we will never include the support for adding the authentication headers to the GetImage action 
 
 
Query 4 – Add custom parameter  
 
Yes, it is possible to add the custom parameter in file manager operations. You can add the custom parameters using beforeSend() event. Refer the below code snippet to add the custom parameters. 
  beforeSend(args: any) { 
      var data = JSON.parse(args.ajaxSettings.data); 
     // Add custom parameter column 
      data["column"] = "value"; 
     // Add custom parameter in ajax settings 
      args.ajaxSettings.data = JSON.stringify(data); 
    //Ajax beforeSend event 
      args.ajaxSettings.beforeSend = function (args) { 
      //Setting authorization header 
      args.httpRequest.setRequestHeader("Authorization", "Bearer-1233") 
    } 
  } 
 
 
You can add the custom class in controller part and use the class in fileOperations. 
 
  public class FileManagerDirectoryContent1 
    { 
        public string Action { get; set; } 
        public string Path { get; set; } 
        public FileManagerDirectoryContent TargetData { get; set; } 
        public AccessPermission Permission { get; set; } 
        public string column { get; set; } 
    } 
 
Refer the below screenshot, we can get the custom parameter value in event argument. 
 
 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Ashokkumar B. 


Ashokkumar Balasubramanian [Syncfusion]
Replied On October 10, 2019 12:11 PM UTC

Hi Jason,   
 
We are glad to hear that the provided solution worked for you. Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Michiel Van Der Lee
Replied On March 27, 2020 04:22 PM UTC

Regarding:
  beforeSend(args: any) { 
      var data = JSON.parse(args.ajaxSettings.data); 
     // Add custom parameter column 
      data["column"] = "value"; 
     // Add custom parameter in ajax settings 
      args.ajaxSettings.data = JSON.stringify(data); 
    //Ajax beforeSend event 
      args.ajaxSettings.beforeSend = function (args) { 
      //Setting authorization header 
      args.httpRequest.setRequestHeader("Authorization", "Bearer-1233") 
    } 
  } 
 

This doesn't work for us. This assumes a static token. What happens if the token is expired?

beforeSend should be of an asynchronous nature, preferably a Promise. So that I can check if a token is expired, get a new token if needed, and then set the Authorization header.

Sowmiya Padmanaban [Syncfusion]
Replied On March 30, 2020 10:36 AM UTC

Hi Michiel,  
 
We have checked your reported query. We would like to let you know that it is not a static token. In our previously attached sample, we have used that token for explaining the use case scenario. You can set the token based on your requirement. 
 
beforeSend(args: any) {  
    //Ajax beforeSend event  
      args.ajaxSettings.beforeSend = function (args) {  
      //Setting authorization header  
      // It is not a static token.  
      args.httpRequest.setRequestHeader("Authorization", "Bearer-1233")  
    }  
  }  
 
 
If we misunderstand your requirement. Can you please share the additional details regarding your requirement. It will helpful for us to resolve your issue at earlier. 
·       Exact requirement. 
·       Video footage or code snippet for your requirement. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 


Unknown
Replied On June 19, 2020 09:08 AM UTC

Adding the bearer token in beforeSend works quite well, however, not for downloads and uploads, as I can see in this thread.

As far as I can read, I need to make my own implementation of starting a download. That means I no longer receive:

public FileStreamResult Download(string path, string[] names, params FileManagerDirectoryContent[] data)

but instead have to create my own request. I have done that in TypeScript like this:

public customDownload(files) {
const items = files.map((item: FileDetail) => {
return {
name: item.name,
isFile: item.isFile
};
});

the files argument is simply args.fileDetails from the menuClick() and toolbarClick(). customDownload then does the XMLHttpRequest like written before in this post. Nothing new there.

This works perfectly if my path is / aka root, but if I change path, I never send the actual path to the file provider. I cannot seem to find a way of sending in the current path. I have tried:

<ejs-filemanager id='default-filemanager' ....... [path]="path"></ejs-filemanager>

but path never gets updated, when I traverse down directories. It's always / in the code:

public path = "/";

So I have two questions:
  1. Is this custom download posted by Ashokkumar still the prefered way to add a bearer token to every request?
  2. If it is, how do I send the path to my file provider? If I console.log(args) from menuClick() and toolbarClick() it does not contain the path anywhere.
Thanks

Unknown
Replied On June 19, 2020 09:26 AM UTC

Okay, just saw I could get the path from:

this.filemanagerObj.path

So that is good. However, still wondering if there is a better way than the answer already posted here, where we have to create our own XMLHttpRequest

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On June 22, 2020 06:23 AM UTC

Hi Morten ,  
 
Greetings from Syncfusion support. 
 
Query 1- Path of FileManager component. 
 
Yes. By setting the path of FileManager component, navigation takes place from the current folder to the specified path. 
 
Refer the below link to know more about the path property. 
 
 
Query2 – Custom download. 
 
In FileManager component, we have provided beforeDownload method. By setting the args.cancel as true in this method, we can prevent the default download action of FileManager component.  And then you can create your custom download within this method. 
 
But your custom method should send data to the controller side, must contain the below arguments. 
 
  var data = { 
        'action':  
        'path':  
        'names':  
        'data':  
      }; 

Refer the below link to know more about the request parameter for Download operation. 
 
 
Please let us know, if you have any need any further assistance. 
 
Regards,  
Shameer Ali Baig S. 


Unknown
Replied On June 22, 2020 08:14 AM UTC

Hello Shameer. I am not interested in implementing my own method just for providing a token in the header. That should not be necessary.

Sowmiya Padmanaban [Syncfusion]
Replied On June 23, 2020 04:33 PM UTC

Hi Morten,  
 
Currently, we have used the form option for download a file from the file manager. So, In Download operation, we are unable to add the header token for FileManager component. To achieve your requirement, we need to use the XHRHttpRequest to download the file from the server. Using the XHRHttpRequest approach for downloading, it will download the file into browser cache once before saving the file locally. This will slow down the download process, since double the time file will be downloaded also it utilizes more bandwidth.  
 
Due to that, we couldn’t consider this support in our FileManager component level.  
 
In our previous update [October 8, 2019], we have provided a details regarding your requirement. You can achieve your requirement by using custom download. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon