Custom Authorization Header for Upload?

22 posts, 0 answers
  1. Heather Kyle
    Heather Kyle avatar
    6 posts
    Member since:
    Oct 2009

    Posted 10 Dec 2012 Link to this post

    Is it possible to set a custom Authorization header for the Kendo Upload to send as part of the request when a file is uploaded? I have seen several forum posts and the getting started article about adding custom information to the content of the POST itself, but this is not what I need. The controller to which I am uploading files is designed to process specific authorization information when it is packed in the header, so I am looking for something similar to what ajax provides for in its beforeSend event handler:
    $.ajax({
      type: "PUT",
      url: URL_FOR_UPLOAD,
      beforeSend: function (xhr) {
       xhr.withCredentials = true;
       xhr.setRequestHeader('Authorization', CUSTOM_AUTHORIZATION_HERE);
    }
    Can this be done?

    Thank you.
    Heather
  2.
  3. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 12 Dec 2012 Link to this post

    Hi,

    Setting a header is technically possible when the file is uploaded using the File API. The upload however does not expose the raw XMLHttpRequest at an appropriate moment.

    We can fix this, but you still won't be able to set headers in older browsers and IE prior to version 10. These browsers rely on the legacy IFRAME method that does not provide control over the headers.

    Please, let us know if you want to proceed despite this limitation. We will then proceed to expose the XHR object in the upload event arguments.

    Note that the upload is already setting the withCredentials option to true.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 29 Mar 2013 Link to this post

    Hello,

    After some deliberation we decided to add the XHR to the upload event arguments. It can be quite useful, when available.

    The update will be included in the internal build later today. Here's a sample how to set a custom header:

    function onUpload(e) {
        var xhr = e.XMLHttpRequest; 
        xhr.addEventListener("readystatechange", function(e) {
            if (xhr.readyState == 1 /* OPENED */) {
                xhr.setRequestHeader('Authorization', CUSTOM_AUTHORIZATION_HERE);
            }
        });
        kendoConsole.log("Upload :: " + getFileInfo(e));
    }

    I hope this helps.

    All the best,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Heather Kyle
    Heather Kyle avatar
    6 posts
    Member since:
    Oct 2009

    Posted 29 Mar 2013 Link to this post

    That does help tremendously. Thank you for making this change.
  8.
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 01 Apr 2013 Link to this post

    Hello,

    I'm glad this helps.

    Please note that we should check "xhr" for null before use. I've added an updated code sample to the docs:

    function onUpload(e) {
        var xhr = e.XMLHttpRequest;
        if (xhr) {
            xhr.addEventListener("readystatechange", function(e) {
                if (xhr.readyState == 1 /* OPENED */) {
                    xhr.setRequestHeader("X-Foo", "Bar");
                }
            });
        }
    }

    Greetings,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Brett
    Brett avatar
    1 posts
    Member since:
    Aug 2014

    Posted 19 Aug 2014 in reply to T. Tsonev Link to this post

    Hi Telerik-  Is there any way you could add the XHR to the "remove" events argument as well?  I need to add a CSRF token to the header of the request just like you set on the upload events.  Its coming back as undefined, so I'm guessing you didn't expose it in all methods.  
  13. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 21 Aug 2014 Link to this post

    Hello,

    This definitely makes sense. We'll investigate, but for the moment you can use the global jQuery Ajax handlers.

    Apologies for the caused inconvenience.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14.
  15. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 22 Jan 2015 in reply to T. Tsonev Link to this post

    I'm using the example provided in the docs below to add an authorization header but I am noticing the event listener is getting called multiple times with a readyState of 1.
    http://docs.telerik.com/kendo-ui/api/javascript/ui/upload#events-upload

    The first time it gets called you can of course successfully add the header but the next time it gets called it throws back  JavaScript runtime error: InvalidStateError.

    I can overcome this by storing a flag that indicates the headers have already been added but why not just add some sugar to the upload widget for adding headers so we don't have to keep track of whether headers have already been added to the request?
  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 23 Jan 2015 Link to this post

    Hello,


    We have met this strange issue before. It turned out that Internet Explorer fires readystatechange twice with readyState 1 and the second execution of the handler causes the error. I assume that this could also be reproduced outside of the Kendo UI Upload widget environment with a standard XMLHttpRequest. Nevertheless as a workaround for the the current case you could name the executed handler and unbind it after the first execution.
    E.g.
    function onUpload(e) {
        var xhr = e.XMLHttpRequest;
     
        if (xhr) {
            xhr.addEventListener("readystatechange", function onReady(e) {
                if (xhr.readyState == 1 /* OPENED */) {
                    xhr.setRequestHeader("foo", "bar");
     
                    xhr.removeEventListener("readystatechange", onReady);
                }
            });
        }
    }

    Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  19. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 31 Aug 2015 in reply to T. Tsonev Link to this post

    Hello there, a year has passed since your last response. Did you have any news for that?

    Using global ajax handlers fixed my problem but it makes my code a bit messy and I was wondering if anything changed since last year.

     

    Thank you.

  20.
  21. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 31 Aug 2015 Link to this post

    Hello Thomas,

    If you are referring to the last mentioned issue is not Kendo UI Upload related, but Internet Explorer related, as it fires the  readystatechange twice with readyState 1. As for the previous one, at the moment we do not provide access to the XHR in the remove event handler.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  23. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 01 Sep 2015 in reply to Dimiter Madjarov Link to this post

    I was referring at the XHR in the remove event handler.
  25. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 02 Sep 2015 Link to this post

    Hello Thomas,

    At the moment the XHR is not available in the remove event handler. I will forward the request for review to the developers team.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  26.
  27. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2016 Link to this post

    Any news on the remove event handler?
  29. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 18 Jul 2016 Link to this post

    Hello Thomas,

    We have this logged for future implementation, but don't have an exact time span to state.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  31. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 03 Nov 2016 Link to this post

    Is there a github link for that issue so that I can be informed about it's progress? Thank you.
  32.
  33. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 03 Nov 2016 Link to this post

    Hello Thomas,

    Here is the GitHub issue for the mentioned case. We have this in our short term development plans for the next Q.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  35. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 12 Jan 2017 Link to this post

    3 years have passed since the request.. glad to be finally scheduled.
  37. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 13 Jan 2017 Link to this post

    Hello Thomas,

    In the next official release we will expose an e.headers parameter to the remove event, which will allow attaching custom request headers to the request.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
    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.
  39. Thomas
    Thomas avatar
    14 posts
    Member since:
    Jul 2013

    Posted 21 Apr 2017 in reply to Dimiter Madjarov Link to this post

    At last! Thank you.
  41. Dennis
    Dennis avatar
    1 posts
    Member since:
    Jul 2018

    Posted 17 Sep 2018 Link to this post

    Hi,

    i´ve try this Example, but the Readystate is Alwayse "0".

    how can we solve the Problem ?

    01.function onUpload(e) {
    02.    var xhr = e.XMLHttpRequest;
    03.    if (xhr) {
    04.        xhr.addEventListener("readystatechange", function(e) {
    05.            if (xhr.readyState == 1 /* OPENED */) {
    06.                xhr.setRequestHeader("X-Foo", "Bar");
    07.            }
    08.        });
    09.    }
    10.}
  43. Joana
    Admin
    Joana avatar
    210 posts

    Posted 19 Sep 2018 Link to this post

    Hi Dennis,

    Generally speaking, 0 for the readyState of the XMLHttpRequest means that the request is still not initialized. Prior to triggering the upload event, the XHR is created and  if the upload is not prevented, open method is invoked and the readystatechange should be fired.

    So, I would need more details on the matter - configuration of the upload or a sample project illustrating the issue - in order to diagnose the cause of the issue. The only reason that I could come up is if the upload gets prevented somewhere in your project logic, and thus, leading to not loading the xhr.

    The example from this thread could be observed and run in our documentation:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/events/upload

    I am looking forward to your reply.

    Regards,
    Joana
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  44.
Back to Top