kendo-uikendo-upload

InvalidStateError - Kendo UI Upload


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

Solution

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