Send token as part of "Remove file request"

[Henrik]

Hi,

I'm currently using your File Uploader widget as part of an edit dialog in a Grid. When uploading I've managed to send a token as part of the header, but I can't get this to work when I'm trying to remove files? I've debugged in to the code and the event-object is missing the "XMLHttpRequest" property. Has this been added in later versions of Kendo(I'm using ) or is there another way I can append said token as part of the header?

My code for the "onUpload" and "onRemove" events are as follows:

01.function onUpload(e) {
02.                            var xhr = e.XMLHttpRequest;
03.                            xhr.addEventListener('readystatechange', function(e) {
04.                                //1 = Opened, append the Authorisation token with the request
05.                                if (xhr.readyState === 1) {
06.
07.                                    // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
08.                                    xhr.setRequestHeader('Authorization', 'Bearer ' + apiservice.getAccessToken()); //jshint ignore: line
09.                                    // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
10.                                }
11.                            });
12.                        }
13.
14.                        function onRemove(e) {
15.                            //Send file ids to the server
16.                            //This seems to always contain one file..
17.                            var fileIds = [];
18.                            for (var j = 0; j < e.files.length; j++) {
19.                                fileIds.push(e.files[j].fileid);
20.                            }
21.                            e.data = {fileIds: fileIds};
22.                        }

[Henrik]

Forgot to add that I'm using version 2016.1.322

[Plamen]

Hello,

You can add the token as in the code below:

function onRemove(e) {

     e.headers = {
         "Authorization": "Bear 1234"
     }
}

Regards,
Plamen
Progress Telerik

[Henrik]

I tried that and when I look at the request in Chrome it doesn't have the "Authorization" header set:

[Plamen]

Hello,

Here is a video how it worked at my side. If you still can't achieve it please let me know what is different at your side so I could test once again locally.

Regards,
Plamen
Progress Telerik

[Henrik]

The code in the "onRemove" event is the same,but for some reason the request is sent without any "Authorization" header info. Attached is the request header info from Visual Studio where the API runs. The front end is made up of a mix of Angular 1.5.8, JQuery to get Kendo UI running and of course Kendo UI. See my earlier post for version info on Kendo UI.

1..kendoUpload({
2.                                async: {
3.                                    saveUrl: apiUrl + '/' + attachmentOptions.controller + '/upload/',
4.                                    removeUrl: apiUrl + '/' + attachmentOptions.controller + '/remove/?delayed=' +
5.                                        attachmentOptions.delayedDelete,
6.                                    withCredentials: false,
7.                                    autoUpload: true
8.                                },

 

Will the setting on line 6 cause the header info to be removed?

[Henrik]

Follow-up question: Why are calls made from this component not intercepted by the following code:

01.$httpProvider.interceptors.push(function (apiUrl, oidcmanager, currentLanguage) {
02.            return {
03.                'request': function (config) {
04.                    if ((config.url.indexOf(apiUrl) === 0) && (config.url.indexOf(oidcmanager.getredirectUri) !== 0)) {
05.
06.                        if (oidcmanager.OidcTokenManager().expired) {
07.                            oidcmanager.OidcTokenManager().redirectForToken();
08.                        }
09.
10.                        // if it's a request to the API, we need to provide the
11.                        // access token as bearer token.
12.                        // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
13.                        config.headers.Authorization = 'Bearer ' + oidcmanager.OidcTokenManager().access_token; //jshint ignore: line
14.                        // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
15.                    }
16.
17.                    config.headers['Accept-Language'] = currentLanguage.get();
18.                    return config;
19.                }
20.            };
21.        });

 

We use this for the transport requests made to the API when we populate a Kendo UI Grid with success.

[Plamen]

Hi,

I have inspected the code with the 'withCredentials' property and it still worked correctly at my side. The other custom code that you passed does not seems related to the scenario so if you think it can be causing the issue you could just comment it and test without it. I am attaching the my sample project so you could insect it and compare it with you scenario.


Regards,
Plamen
Progress Telerik

[Henrik]

For anyone who might come across this: I fixed the issue by appending the token in the URL. This is not what I wanted but after having spent days on something as basic as this, and realizing Kendo doesn't seem to be able to offer this functionality, I was forced to go with the less ideal solution. 

[Plamen]

Hi Henrik,

Thank you for sharing your solution. 

I could not replicate the issue at my side once again. Would you please elaborate how is your scenario different from the one in the "WebApplication5.zip" application that I attached in my previous reply where the token was sent correctly?

As for sending the token in the url - it is usually not recommended practice to send a security sensitive token in the url.

Regards,
Plamen
Progress Telerik