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. Image for the cookie policy date

Anti-Forgery token on post request to FileActionDefault

 We're trying to incorporate the FileExplorer into our product. In our software we check every Post request for the Anti-Forgery token (Because of csrf, which will be relatively easy if the target is a file structure). How can I manipulate the request the FileExplorer does? We're looking in the headers and form values for the token so ideally we should add a header value to the XMLHttpRequest. I found the FileExplorerProperties.BeforeAjaxRequest property, but dont know how to use it.

6 Replies

WO Wouter March 11, 2016 09:19 AM UTC

I added the token to the querystring, and check for the token in our custom AuthorizeAttribute

BP Balamurugan P Syncfusion Team March 11, 2016 01:08 PM UTC

Hi Wouter,

Thanks for using Syncfusion Products

Query:  Add a header to the XMLHttpRequest

We have analyzed your requirement and you can achieve this by using “ajaxSettings” API of FileExplorer control. To add custom headers in the Ajax request, please refer following code block.

Code example [JavaScript]:

$(function () {


        path: "http://mvc.syncfusion.com/ODataServices/FileBrowser/",

        ajaxAction: "http://mvc.syncfusion.com/OdataServices/fileExplorer/fileoperation/doJSONAction",

        ajaxSettings: {

            // Using “beforeSend” event, you can specify your custom method.

            read: { beforeSend: beforeAjaxRequest },

            createFolder: { beforeSend: beforeAjaxRequest },

            remove: { beforeSend: beforeAjaxRequest },

            rename: { beforeSend: beforeAjaxRequest },

            paste: { beforeSend: beforeAjaxRequest },

            getDetails: { beforeSend: beforeAjaxRequest },

            search: { beforeSend: beforeAjaxRequest }




function beforeAjaxRequest(xhr) {

    xhr.setRequestHeader('x-requested-with', 'some value');


In case, if you are using our online http://mvc.syncfusion.com/OdataServices service for handling server side operations of FIleExplorer, you are not able to add “X-CSRFToken” header that is used to solve CSRF problem. Because we have not specified this in “Access-Control-Allow-Headers” part of our online server (http://mvc.syncfusion.com/OdataServices).

We have prepared a MVC sample for your requirement and you can find the sample under the following location

Sample: http://www.syncfusion.com/downloads/support/forum/123367/ze/FileExplorer_(2)-104246859

Query:  I found the FileExplorerProperties.BeforeAjaxRequest property, but dont know how to use it.

Please refer following code block to use FileExplorerProperties.BeforeAjaxRequest Property




    .ClientSideEvents(eve => eve.BeforeAjaxRequest("beforeAjaxRequest"))   



<script type="text/javascript">

    function beforeAjaxRequest(args) {

        //Add your code block



Online API Documentation: http://help.syncfusion.com/js/api/ejfileexplorer  (Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components)

Please let us know if you have any queries.



WO Wouter March 14, 2016 11:05 AM UTC

Thanks! We already had a method like beforeAjaxRequest in the js code, so this works perfect. We're using our own controller action to handle the file explorer requests.

Thanks for the link to the api reference. I was searching for it at the control pages. I'm mainly using the JS approach because that fits our style better, so the api reference is much appreciated!

SC Saranya CJ Syncfusion Team March 15, 2016 08:48 AM UTC

Hi Wouter,
Thank you for your feedback. Please let us know if you require any other assistance.

WO Wouter March 16, 2016 09:30 AM UTC

Instead of defining a bunch of handlers we intercept the ajax request with jquery like this:

$(document).ajaxSend(function(event, xhr, settings) {
            // This will set the token for asp.net mvc:
            xhr.setRequestHeader("__RequestVerificationToken", securityToken);

BP Balamurugan P Syncfusion Team March 17, 2016 08:40 AM UTC

Hi Wouter,

Yes, this is also a possible way to add the header in Ajax request. Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend” event. Using this event, you can add the specified header in that Ajax request.

Also instead of adding this header in all Ajax request that is to be sent, you can add this header to particular Ajax requests only, which is send by FileExplorer. Please refer following code block.

       var localServ = "http://mvc.syncfusion.com/OdataServices/fileExplorer/fileoperation/doJSONAction";    

       $(document).ajaxSend(function(event, xhr, settings) { 

       //specified header will be added to "FileExplorer" related Ajax request only.

       //”localServ” contains the URL of server side Ajax handling method of FileExplorer

       if ( settings.url == localServ ) {

              xhr.setRequestHeader("x-requested-with", "securityToken");




       $(function () {             


               path: "http://mvc.syncfusion.com/ODataServices/FileBrowser/",

               ajaxAction: localServ



Reference link for ajaxSend” event: http://api.jquery.com/ajaxSend/ 

We have prepared a sample that will set the token for ASP.NET MVC and you can find under following location

Sample: http://www.syncfusion.com/downloads/support/forum/123367/ze/FileExplorer_(3)-2145880733
Note: We may also use “jQuery.ajaxSetup()” but it has some drawbacks, refer below link https://api.jquery.com/jquery.ajaxsetup/

Please let us know, if you have any queries.



Live Chat Icon For mobile
Up arrow icon