Adding Request Headers to the XmlHttpRequest with Kendo UI Upload control

Question

I'm trying to use the code provided by Telerik to add request headers to the XHR, but I'm getting the following error.

"0x800a139e - JavaScript runtime error: InvalidStateError"

Here is the code

$(document).ready(function () {
                        $("#file").kendoUpload({
                            multiple: false,
                            async: {
                                saveUrl: "save",
                            },
                            upload: onUpload,

                        });
                    });

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

Answer 1

It turned out that Internet Explorer fires readystatechange twice with readyState 1 and the second execution of the handler causes the error. As a workaround for the the current case you could name the executed handler and unbind it after the first execution.

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