ImageBrowser with dynamic ImageUrl

[JohnVS]

We are using the ImageBrowser with Azure Blob Storage, and we have a database with the images stored as "Files." Each File row contains FileId and Name. Let's use this row as an example:

FileId: "5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d"
Name: "logo.jpg"

Once we have the FileId, we use that to create a new Blob Container in Azure (so it creates a new "directory" in Azure Storage with a URL like "https://clientname.blob.core.windows.net/5d4acf03-7e9b-4dae-ba1a-d4ded83bba6d/logo.jpg").

OK, so when I pass our list of images back to the Kendo ImageBrowser, the only property it has is "Name," which in this case is "logo.jpg". But if I set the imageUrl to "https://clientname.blob.core.windows.net/", then when it inserts the image into the Editor, the src is "https://clientname.blob.core.windows.net/logo.jpg", which is obviously incorrect. I still need the FileId, which will be different for every image. Both the thumbnailUrl and the imageUrl need the FileId as well to be able to properly build the correct URL.

I tried creating a custom schema like this:

schema: {
    model: {
        fields: {
            name: { field: "name" },
            type: { field: "type" },
            size: { field: "size" },
            containerId: { field: "containerId" }
        }
    }
}

And passed a "containerId" property back with each object from the Read action. But then I didn't know how to make the thumbnailUrl or imageUrl functions use that containerId property.

I'm stuck! Can you help me figure out how to make this work please? Thank you.

[Vladimir Iliev]

Hi John,

As this thread is related to another support ticket created by you - #814837 I will include the solution that you found in order to be more accessible by the other members of our community:

As it is, we spent hours wading through forum posts and the documentation, and we DID figure out a way to make our situation work.

You can pass back additional properties from the controller (in our case, a property called "FileId"), and Kendo attaches that property to each ImageBrowser item. So what I did is when an item is clicked, I get the ImageBrowser instance, look through the List for an item that has the "Name" of that file, then I grab the "FileId" property of that item. In that way, I can build the ImageUrl with the FileId, as I requested.

imageUrl: function (name) {
    var fileId = "";
    var data = $(".k-imagebrowser").data("kendoImageBrowser").dataSource.data();
    $.each(data, function (key, obj) {
        if (obj.name == name)
            fileId = obj.FileId;
    });
    var url = "https://clientname.core.windows.net/" + fileId + "/original.jpg";
    return url;
}

Regards,
Vladimir Iliev
Telerik

 

 

[JohnVS]

Vladimir, thank you for posting this here. I wanted this issue to be on the forum as well, so others could find it if they run into a similar problem.

I should mention that since the imageUrl function receives the full path to the file (so the name parameter below could be "/New Folder/image.jpg"), the filename needs to be extracted from what is passed into it. I did it like so:

imageUrl: function (name) {
    //get only filename
    if (name.indexOf('/') !== -1) {
        name = name.substring((name.lastIndexOf("/") + 1));
    }

    var fileId = "";
    var data = $(".k-imagebrowser").data("kendoImageBrowser").dataSource.data();
    $.each(data, function (key, obj) {
        if (obj.name == name)
            fileId = obj.FileId;
    });
    var url = "https://clientname.core.windows.net/" + fileId + "/" + name;
    return url;
}