Custom Authorization Header for Upload?

[Heather Kyle]

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

[T. Tsonev]

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

[T. Tsonev]

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

[Heather Kyle]

That does help tremendously. Thank you for making this change.

[T. Tsonev]

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

[Brett]

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.  

[T. Tsonev]

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

 

 

[RES]

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?

[Dimiter Madjarov]

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

 

 

[Thomas]

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.

[Dimiter Madjarov]

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

 

 

[Thomas]

I was referring at the XHR in the remove event handler.

[Dimiter Madjarov]

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

 

 

[Thomas]

Any news on the remove event handler?

[Dimiter Madjarov]

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

 

 

[Thomas]

Is there a github link for that issue so that I can be informed about it's progress? Thank you.

[Dimiter Madjarov]

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

 

 

[Thomas]

3 years have passed since the request.. glad to be finally scheduled.

[Dimiter Madjarov]

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

[Thomas]

At last! Thank you.

[Dennis]

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.}

[Joana]

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