Kendo UI Editor Upload and Thumbnail Url event

Question

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

Answer 1

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.