Add authorization header during operations.

[Tony Comtois]

Hello,

How do I add an authorization bearer/token to request header when performing retrieval operations in the file manager component?

Thanks

Tony

[Indhumathy Loganathan]

Hi Tony,

Yes, you can send JWT to the FileManager node server for authorization. We have addressed similar requirement in the below forum.

https://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request

In the shared forum, we have used the below events of FileManager to send authorization header.

File Operations	Events	Update
GetImage	beforeImageLoad	http://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request?reply=NGtQAH
Download	beforeDownload	http://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request?reply=NoPWbC
Read, Delete, Upload, Rename, Copy	beforeSend	http://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request?reply=NoPWbC

Please confirm the File Service provider you are using to enable authentication at your end.

https://ej2.syncfusion.com/vue/documentation/file-manager/file-system-provider/

Check out the below links to know more about FileManager component.

Documentation: https://ej2.syncfusion.com/vue/documentation/file-manager/getting-started/

Demos: https://ej2.syncfusion.com/vue/demos/#/material/file-manager/overview.html

API Reference: https://ej2.syncfusion.com/vue/documentation/api/file-manager/#filemanagercomponent

Please check the above details and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Tony Comtois]

Has this been implemented in the react file manager component?  I'm using v19.4.56 and the onBeforeSend arguments do not contain a httpRequest property to modify.

Thanks

Tony

 

[Indhumathy Loganathan]

Hi Tony,

As per your request, we have prepared a React File Manager sample with mentioned version 19.4.56. Please find the sample and service provider attachment from below link.

Sample: https://stackblitz.com/edit/react-file-manager-r8rgid?file=package.json,index.js

Service provider: https://www.syncfusion.com/downloads/support/forum/175522/ze/ej2-aspcore-file-provider-88404643

We able to get the JWT token at server end. Check the below screenshot.

Please get back to us if you need any further assistance.

Regards,

Indhumathy L

[Tony Comtois]

If retrieving a token async how would one await the token response before the httprequest has closed?

[Indhumathy Loganathan]

Hi Tony,

We understand that you want to retrieve the token value using an async API call within the beforeSend event. We would like to let you know that the File Manager events do not wait for the completion of an async API call to send a request. So, you need to update your token attribute initially before the beforeSend event is triggered. The stored token value can be then passed through the beforeSend event.

To resolve your problem, you can use the required methods (based on your application logic) to update the token values initially from an async API call. Check the below blog for reference to update the token value at initial rendering in react.

https://stackoverflow.com/questions/53819864/how-to-async-await-in-react-render-function

Please try this suggestion at your end and get back to us if you need any further assistance.

Regards,

Indhumathy L