This is a migrated thread and some comments may be shown as answers.

ImageBrowser - item properties different between read and upload

6 Answers 221 Views
Editor
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 01 May 2014, 11:22 PM
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.

6 Answers, 1 is accepted

Sort by
0
JohnVS
Top achievements
Rank 1
answered on 02 May 2014, 06:45 PM
(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.)
0
Alex Gyoshev
Telerik team
answered on 05 May 2014, 07:35 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
JohnVS
Top achievements
Rank 1
answered on 05 May 2014, 01:36 PM
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.
0
JohnVS
Top achievements
Rank 1
answered on 05 May 2014, 01:39 PM
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."
0
Alex Gyoshev
Telerik team
answered on 05 May 2014, 02:35 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
JohnVS
Top achievements
Rank 1
answered on 05 May 2014, 09:04 PM
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!
Tags
Editor
Asked by
JohnVS
Top achievements
Rank 1
Answers by
JohnVS
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or