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");
                                }
                            });
                        }
                    }

Will be undefined if the browser does not support File API – LittleDragon Aug 01 '14 at 19:25 — LittleDragon, Aug 01 '14 at 19:25

score 4 · Answer 1 · answered Mar 16 '16 at 10:19

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);
                            }
                        });
                    }
                }

Adding Request Headers to the XmlHttpRequest with Kendo UI Upload control

1 Answers1