How To Implement JWT Token Send With Every FileManager Request
26 Replies
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.
Hi James Harrelson,
You can send the custom attribute as query parameter in image URL for GetImage operation by using beforeImageLoad event.
Please refer the below code snippet.
|
<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";
} |
Also, to receive the custom parameter in server side GetImage method, you need to add the custom attribute in base class file. Please, refer the below code.
|
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);
} |
Please, refer the below output screenshot of the above suggested solution.
Please, refer the below sample link.
Service link: https://www.syncfusion.com/downloads/support/forum/144270/ze/file_provider1940570311.zip
Note: Run the service and refer the local host URL in the sample.
Please, refer the below forum link for your reference.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
We have implemented customdownload() function in react and now we are able to pass the keycloak username and token to download api in file manager. But the downloaded file is of 'file' type instead of original file type. For eg: if we download word document, downloaded file is of 'file' type instead of '.doc' and we have to open it using ms word only. Also, the name of the file is also changed.
SIGN IN To post a reply.
