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

ImageBrowser with dynamic ImageUrl

2 Answers 188 Views
Editor
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 29 Apr 2014, 09:55 PM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 01 May 2014, 03:32 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
JohnVS
Top achievements
Rank 1
answered on 01 May 2014, 03:46 PM
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;
}
Tags
Editor
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
JohnVS
Top achievements
Rank 1
Share this question
or