Send token as part of "Remove file request"

8 posts, 0 answers
  1. Henrik
    Henrik avatar
    11 posts
    Member since:
    Oct 2016

    Posted 26 Sep Link to this post

    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.                        }
  2. Henrik
    Henrik avatar
    11 posts
    Member since:
    Oct 2016

    Posted 27 Sep in reply to Henrik Link to this post

    Forgot to add that I'm using version 2016.1.322
  3. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 27 Sep Link to this post

    Hello,

    You can add the token as in the code below:
    function onRemove(e) {
     
         e.headers = {
             "Authorization": "Bear 1234"
         }
    }


    Regards,
    Plamen
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Henrik
    Henrik avatar
    11 posts
    Member since:
    Oct 2016

    Posted 28 Sep in reply to Plamen Link to this post

    I tried that and when I look at the request in Chrome it doesn't have the "Authorization" header set:
  5. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 28 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Henrik
    Henrik avatar
    11 posts
    Member since:
    Oct 2016

    Posted 29 Sep Link to this post

    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?

  7. Henrik
    Henrik avatar
    11 posts
    Member since:
    Oct 2016

    Posted 29 Sep Link to this post

    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.

  8. Plamen
    Admin
    Plamen avatar
    2812 posts

    Posted 03 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top