kendo ui imagebrowser default image folder

Question

I have used this code to try to produce an image browser. http://www.telerik.com/forums/imagebrowser-with-images-from-database

I don't get where it gets the folder image from? I found an image with the default folder on the image here: Content\kendo\2013.2.716\Default but i can't find where or if it ever uses it.

I don't know if that realy is my problem either.

As you can se it keeps loading and the folder image never shows.

I followed the code in the example on the link above and this is what i end up with. When i add a folder it adds the folder to the database and it also adds the images.

When i add an image it shows the thumbnail and file name as expected but when i reload the page i end up with the same result as for the folder.

Here is the code i call when it read the files:

  public JsonResult Read(string path)
    {
        var folders = imageBrowserRepository.Folders(path);

        var images = imageBrowserRepository.Images(path);

        return Json(folders.Concat(images));
    }



    public IEnumerable<ImageBrowserEntry> Folders(string path)
    {
        return Folders(GetFolderByPath(path));
    }

     public Folder GetFolderByPath(string path)
    {
        if (string.IsNullOrEmpty(path) || path == "/")
        {
            return GetRootFolder();
        }

        var name = GetFolderNames(path).Last().ToLower();

        if (!path.StartsWith("/"))
        {
            path = "/" + path;
        }

        path = NormalizePath(path, name);

        return travelContext.Folders.FirstOrDefault(f => f.Path.ToLower() == path && f.Name.ToLower() == name);
    }


    public Folder GetRootFolder()
    {
        return travelContext.Folders.SingleOrDefault(f => f.Parent == null);
    }

this is what the folder/image looks like that gets returned

I guess it could have something to do with the filesize?

Answer 1

You have not given any detail about your image browser configuration but you have to check your configuration for "imageBrowser" property of "kendoEditor" jquery object initialization as explained on page Image Browser Configuration. Jquery code is as below as per example.

$(document).ready(function(){
     $("#editor").kendoEditor({
         imageBrowser: {
            transport:`enter code here` {
                read: "imagebrowser/read",
                destroy: "imagebrowser/destroy",
                create: "imagebrowser/createDirectory",
                uploadUrl: "imagebrowser/upload",
                thumbnailUrl: "imagebrowser/thumbnail"
                imageUrl: "/content/images/{0}"
            }
         }
     });
  });

As per imageBrowser.transport and imageBrowser.transport.read configuration, i think when user click on Image Browser icon in editor it makes ajax request to path which is set in read property as as per above example its "imagebrowser/read" and this api need to return array of all images name with size in below json array format :

[{ "name": "foo", "type": "d" },{ "name": "bar.png", "type": "f", "size": 15289 }]

So check your configuration and set your API correctly to make it work.