I keep getting this weird bug where when I try to set my Authorization header, I keep getting 'InvalidStateError'. Here is my code:
$("#files").kendoUpload({
async: {
saveUrl: myApiUrl + "/" + id,
autoUpload: true
},
upload: function(e) {
var xhr = e.XMLHttpRequest;
if (xhr) {
xhr.addEventListener("readystatechange", function onReady(e) {
if (xhr.readyState === 1 /* OPENED */) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
}
});
}
}
});
It turns out that IE for some reason fires the readystatechange twice for readyState==1. I dont know why but it does. Its the second time that it calls it that make it throw the error. So here is my solution:
After the first time it is called, I just remove the listener.
$("#files").kendoUpload({
async: {
saveUrl: myApiUrl + "/" + id,
autoUpload: true
},
upload: function(e) {
var xhr = e.XMLHttpRequest;
if (xhr) {
xhr.addEventListener("readystatechange", function onReady(e) {
if (xhr.readyState === 1 /* OPENED */) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
xhr.removeEventListener("readystatechange", onReady);
}
});
}
}
});