Ej2 FileManager: Throwing error NetworkError: Failed to send on XMLHTTPRequest: Failed to load

[ISMAIL HAMZAH]

Hello,

I'm in the process of implementing Ej2 FileManager using physical file approach which I download from: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/wwwroot/Files

The FileManager throwing an error but if I try the API using Swagger everything working fine (returning status 200)

Error:

Success using swagger:

This is my FileManager configuration:

Is there anything I have missed?

Best regards,

Ismail

[Shalini Maragathavel]

Hi Ismail, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you are facing an issue in rendering the File Manager component with physical file service provider. So we have prepared a File Manager sample with physical file service provider and tried to replicate the issue but unfortunately we are unable to reproduce it at our end as the File Manager is rendered properly without any errors. 

We have attached our validated sample and video demonstration for your reference below.

Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/File_Manager_(2)293312250.zip 

Sample: https://stackblitz.com/edit/v3nu32?file=index.js

Service provider: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-aspcore-file-provider-master_(5)-406104639.zip 

If your reported problem persists, then please share the following information to validate further. 

• If possible, replicate your reported problem in the above provided sample or provide us a simple sample to replicate the issue.
• Elaborate on your issue in detail with video demonstration.
• Are you facing any CORS or other console error while running the File Manager sample? If yes, please share the screenshot of the error.
• Syncfusion package version.

 

This information would help us to find the exact cause of your reported problem and to provide you the prompt solution. 

Regards,  

Shalini M. 

[ISMAIL HAMZAH]

Hello Shalini,

Thank you for your feedback. I have found the problem that causing this, that is because FileManager POST did not send CSRF token. For your information, all off my API should comply with the CSRF for security reason. For now, I have disabled CSRF at API consumed by FileManager AjaxSettings by adding: [IgnoreAntiForgeryToken] to the API controller:

For complete solution, I should be able sent the CSRF token. Could you please share a way to intercept the POST from FileManager so I can add CSRF token to the "headers"? I have try that through "beforeSend" event, but still no luck. Could you please share information of how to update the "headers" before it POST ed?

Thank you 

Best regards,

Ismail

[Shalini Maragathavel]

Hi Ismail, 

Thanks for the update. 

Based on your query, we suspect that you need to send the token with the header in the File Manager component. You can pass the token with the header using beforeSend event as demonstrated in the below code snippet. 

 

var fileObject = new ej.filemanager.FileManager({ 

  ajaxSettings: { 

. . .
  }, 

  beforeSend: function(args) { 

    args.ajaxSettings.beforeSend = function(args) { 

       

      args.httpRequest.setRequestHeader('Authorization', 'CSRF-Token'); //you can pass the CSRF token here 

    }; 

  } 

}); 

You can access the passed token value in the FileOperations method of server as demonstrated in the below code snippet,  

 

  public object FileOperations([FromBody] FileManagerDirectoryContent args) 

            

        { 

            var val = HttpContext.Request.Headers["Authorization"]; 

            if (args.Action == "delete" || args.Action == "rename") 

            { 

             } 

              } 

Please find the below sample for your reference 

Sample: https://stackblitz.com/edit/v3nu32?file=index.js 

API Link: https://ej2.syncfusion.com/javascript/documentation/api/file-manager#beforesend
                https://ej2.syncfusion.com/javascript/documentation/api/file-manager/beforeSendEventArgs/#ajaxsettings 

Please get back to us if you need further assistance.

Regards,
Shalini M. 

[ISMAIL HAMZAH]

Hi Shalini,

Thank you for your help. The answer you provide enable me to send custom header before send the ajax.

Best regards,

Ismail

[Keerthana Rajendran]

Hi Ismail, 

 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R.