ImageBrowser - item properties different between read and upload

[JohnVS]

Here is our ImageBrowser startup code:

$("#Html").kendoEditor({
    imageBrowser: {
        schema: {
            model: {
                id: "EntFileId",
                fields: {
                    name: "name",
                    type: "type",
                    size: "size",
                    EntFileId: "EntFileId"
                }
            }
        },
        transport: {
            read: "@Url.Action("Index", "EditorImageBrowser", new { area = "" })",
            destroy: {
                url: "@Url.Action("Delete", "EditorImageBrowser", new { area = "" })",
                type: "POST"
            },
            create: {
                url: "@Url.Action("Create", "EditorImageBrowser", new { area = "" })",
                type: "POST"
            },
            uploadUrl: "@Url.Action("Upload", "EditorImageBrowser", new { area = "" })"
        }
    }
});

From our MVC Controller, we are returning this model of object to the Read action of our ImageBrowser:

return Json(new { name = "Test1.jpg", type = "f", size = 10000, EntFileId = "23ebf087-c946-4cb8-9f9c-f2584dd9aadc" });

When the Read action receives that result, it puts all of those properties, including the EntFileId, on the image item created in the ImageBrowser. So when I loop through the items in the ImageBrowser by doing something like this:

var data = $(".k-imagebrowser").data("kendoImageBrowser").dataSource.data();
$.each(data, function (key, obj) {
    console.log(obj);
    //displays: i {_events: Object, name: "Test1.jpg", size: 10000, type: "f", EntFileId: "23ebf087-c946-4cb8-9f9c-f2584dd9aadc"…}
});

You can see that the EntFileId gets attached to the items.

Now, when we Upload a file, we are supposed to return the uploaded file object back to Kendo, so we return it like this:

return Json(new { size = uploadedFileSize, name = file.Name, type = "f", EntFileId = file.FileId.ToString() }, "text/plain");

I see in Developer Tools that the Upload action is definitely returning an object with the EntFileId, but for some reason, when that item is put into the ImageBrowser, it does not attach the EntFileId property to that item. So after the Upload action completes, and I do the same loop through the items in the ImageBrowser, the uploaded image looks like this in the Console:

i {_events: Object, type: "f", name: "402082_546613141879_2009325815_n.jpg", size: 30834, uid: "0bd12e68-8245-48fe-81e1-d123fc813415"…}

There is no EntFileId property for the item (even if you expand the object).

Why does the extra EntFileId property get attached from the Read action, but not when the object is returned from the Upload action? Can you help me understand what's going on and why there is a difference? Thank you.

[JohnVS]

(Note: it appears I incidentally placed this post in the MVC forum. While we are using MVC, our issue is not directly related to MVC. You can move this topic, if it fits better in the "Telerik Forums / Kendo UI Forum / Editor" forum.)

[Alex Gyoshev]

Hello John,

The upload action is delegated to the upload widget -- it is not native to the DataSource and does not support custom fields at this time.

Regards,
Alex Gyoshev
Telerik

 

 

[JohnVS]

OK. Do you have any tips on how to tap into the ImageBrowser's events, so after the Upload happens, I can call a refresh of the images in the browser? From what you just said, it seems that's the only way to reload the items, so they have the correct properties from the DataSource.

[JohnVS]

Just realized that sentence may have been vague. When I wrote "call a refresh of the images in the browser," I meant "call a refresh on the DataSource of the ImageBrowser."

[Alex Gyoshev]

Hello John,

Consider this an unsupported work-around (as it may leak), but something along these lines might help:

var editor = $("#editor").data("kendoEditor");
editor.bind("execute", function(e) {
   if (e.name == "insertimage") {
       // necessary because event is fired before window show
       setTimeout(function() {
           var imagebrowser = $("[data-role=imagebrowser]").data("kendoImageBrowser");
           imagebrowser.upload.bind("upload", function() {
               imagebrowser.dataSource.read();
           });
       });
   }
});

Regards,
Alex Gyoshev
Telerik

 

 

[JohnVS]

I understand this is unsupported, so thank you for the tip. That solution, for some reason, seemed to do a lot of flashing (loading overlays appearing and disappearing, thumbnail trying to load) or something. This solution seemed to work a bit better for us:

$(function () {
    $("#Html").kendoEditor({
        execute: function (e) {
            if (e.name == "insertimage") {
                window.setTimeout(function () {
                    var ds = $(".k-imagebrowser").data("kendoImageBrowser").dataSource;
                    ds.bind("change", onKendoEditorDataSourceChange);
                }, 100);
            }
        }
    });
});

function onKendoEditorDataSourceChange(e) {
    if (e.action == "add") {
        window.setTimeout(function () {
            $(".k-imagebrowser").data("kendoImageBrowser").dataSource.read();
        }, 100);
    }
}

Thanks for your time!