Need to attach antiForgeryToken in angularjs upload

[TJ]

I have an angularjs kendo upload object:

<input name="myDoc" id="myDoc" type="file" kendo-upload="vm.myDocUploader" k-localization="{ select: 'Upload Document' }" k-success="vm.onUploadDocumentSuccess" k-async="{ saveUrl: vm.saveDocUrl, removeUrl: vm.removeDocUrl, autoUpload: true}" />

I need to attach my MVC anti-forgery token to this request before it uploads (and when they are deleted). How would I go about this?

I've found a few examples for J-Query but can't seem to apply them to angularjs. They reference using the SetRequestHeader method, but I cannot access the request header when using the k-upload() method. 

Thanks!

[Neli]

Hello,

Below you will find an article regarding sending additional data to the server. You could use the described approach to send the antiforgerytoken

- https://docs.telerik.com/kendo-ui/knowledge-base/upload-mvc-send-additional-data

function onUpload(e){
    e.data = { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() };
}

Regards,

Neli
Progress Telerik

[TJ]

Hi Neli,

Thanks for replying. Unfortunately this does not seem to help for angularjs. I have set up my input element like this, with  k-upload="vm.onUpload" add to the end:

<input name="myDoc" id="myDoc" type="file" kendo-upload="vm.myDocUploader" k-localization="{ select: 'Upload Document' }" k-success="vm.onUploadDocumentSuccess" k-async="{ saveUrl: vm.saveDocUrl, removeUrl: vm.removeDocUrl, autoUpload: true}" k-upload="vm.onUpload" />

It goes into my "onUpload" function as it should, but the e.data parameter is not available to me there. There is e.XMLHttpRequest (which doesn't have .data anywhere under it), .files, .isDefaultprevented, .preventDefault, and .sender. 

[Neli]

Hi TJ, 

Could you please try the following implementation of the upload event handler and let me know if it is helpful for resolving the issue:

 

<input name="files"
  type="file"
  kendo-upload
  k-async="{ saveUrl: 'save', removeUrl: 'remove', autoUpload: true, withCredentials: false }"
  k-upload="onUpload"
/>
 
<script>
angular.module("KendoDemos", ["kendo.directives"])
    .controller("MyCtrl", function($scope){
            
       $scope.onUpload = function(e) {
            var xhr = e.XMLHttpRequest;
          if (xhr) {
              xhr.addEventListener("readystatechange", function (e) {
                  if (xhr.readyState == 1 /* OPENED */) {
                      xhr.setRequestHeader("X-Foo", "Bar");
                  }
              });
          }
       }
    })
</script>

Regards,

Neli

[TJ]

Hi Neli,

Apologies for the delayed response. I was able to get the code from your above comment working, and attach my token in the .setRequestHeader() method.  

Also for anyone else reading this, attaching the token to the onRemove method had to be done a little differently, but I got it working with the below:

function onRemove(e) {            
      e.headers = { "XSRF-Token" : "tokenValue" };            
}

Thanks Again!

-T.J.

[Neli]

Hi TJ,

I'm happy to hear that you've managed to find a solution to the issue. Thank you for sharing your solution with our community it is greatly appreciated. It will surely help someone who is working on a similar to your scenario.

Regards,

Neli