CODEWITHSUNDEEP
javascriptjquerykendo-ui
Haris
Haris

Reputation: 1219

Kendo UI Editor Upload and Thumbnail Url event

I'm trying to set request headers of Kendo UI Editor's Upload Url and ThumbnailUrl for authorization.

$(document).on("change", "input[name=file]", function (e) {
    $("#Template").data("kendoEditor").options.imageBrowser.transport.uploadUrl.beforeSend = function (xhr) {
        xhr.setRequestHeader("Authorization", GetToken());
    };
});

I've tried this one. Anybody knows how to set it? Kendo UI Upload have its event for upload and on the back-end Editor is also using Kendo UI Upload. Help will be appreciated. Thanks

Upvotes: 1

Views: 1292

Answers (1)

Haris
Haris

Reputation: 1219

I got an answer from telerik support. There is no event for upload. But we can bind it in execute event. here is the code

function onExecute(e) {
    if (e.name == "insertimage") {
        setTimeout(function () {
            var imagebrowser = $("[data-role=imagebrowser]").data("kendoImageBrowser");
            imagebrowser.upload.bind("upload", function (e) {
                var xhr = e.XMLHttpRequest;
                if (xhr) {
                    xhr.addEventListener("readystatechange", function (e) {
                        if (xhr.readyState === 1 /* OPENED */) {
                            xhr.setRequestHeader("Authorization", GetToken());
                        }
                    });
                }
            });
        }, 0);
    }
}

There isn't a way to set a header for the thumbnail request. So I've achieved this functionality by sending user id as a query string in Thumbnail request.

 thumbnailUrl: hostHeaderUrl + "api/ImageBrowser/Thumbnail?userId=" + currUserId

Hopefully my answer will help.

Upvotes: 1

Related Questions