ImageBrowser - item properties different between read and upload

7 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 01 May 2014 Link to this post

    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.
  2. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 02 May 2014 in reply to JohnVS Link to this post

    (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.)
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 May 2014 Link to this post

    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.

     
  5. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 05 May 2014 in reply to Alex Gyoshev Link to this post

    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.
  6. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 05 May 2014 in reply to JohnVS Link to this post

    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."
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 May 2014 Link to this post

    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.

     
  8. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 05 May 2014 in reply to Alex Gyoshev Link to this post

    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!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready