How To Implement JWT Token Send With Every FileManager Request

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?

<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")      }  }

Christo,

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.

<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")      }    }

[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);      }    }

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")      }    }

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; }      }

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")      }    }

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")       }     }

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

Okay, just saw I could get the path from:

var data = {          'action':           'path':           'names':           'data':         };

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

On GetImages could there be a way to add a query parm? I could then pass my token in the url.

<ejs-filemanager      id="overview"      [ajaxSettings]="ajaxSettings"      (beforeImageLoad)="beforeImageLoad($event)"      [view]="view"    >    </ejs-filemanager>      beforeImageLoad(args) {      // Add custom parameter in image URL      args.imageUrl = args.imageUrl + "&custom_attribute=" + "Syncfusion";    }

public class FileManagerDirectoryContent1      {          public string Name { get; set; }          public string custom_attribute { get; set; }          public string[] Names { get; set; }  }  [Route("GetImage")]          public IActionResult GetImage(FileManagerDirectoryContent1 args)          {              return this.operation.GetImage(args.Path, args.Id,false,null, null);          }

It is not secure or good practice to send auth tokens as query parameters. Do you have plans to address this? There should be an easy way to provide auth headers before every request that this component sends. Security should be the number one priority.

Edit: Something like what you've done here would be excellent! https://help.syncfusion.com/js/datamanager/adavancedfunctionalities#custom-request-headers

Hi Luke Mitchell,  

 

Based on the current implementation of FileManager component, we have used form submit for download operations of FileManager component and not a ajax request. So, we can’t add the JWT token with this request. However, you can add the custom data to the download operations using beforeDownload event. 

 

Please, refer the below forum link for beforeDownload operations. 

 

https://www.syncfusion.com/forums/157578/customization-beyond-basic-implementations-source-customization 

 

However, we have used Query parameter for GetImage operations of FileManager component. Other than the two operations ( Download, GetImage), you can send the JWT token using beforeSend event of FileManager component. 

 

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

 

Regards,  

Sowmiya.P 

When do you plan on fixing the implementation of the file manager to allow for easily setting headers? Providing a token as a query param for GetImageUrl is bad security and not good practice. Users should be able to set headers for all requests that this component makes very easily.