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.

Answer 2

Here my code:

$("#yourID").kendoEditor(
        {
            tools:
              [
                  ...
              ],
            messages: {
                ...
            },
            encoded: false,
            imageBrowser: {
                messages: {
                    dropFilesHere: "Drop and Drag Images"
                },
                transport: {
                    read: {
                        url: "ImageLogic/ReadImage",
                        dataType: "json",
                        type: "POST"
                    },
                    destroy: {
                        url: "ImageLogic/DestroyImage",
                        type: "POST"
                    },
                    create: {
                        url: "ImageLogic/CreateImage",
                        type: "POST"
                    },
                    thumbnailUrl: "ImageLogic/Thumbnail",
                    uploadUrl: "ImageLogic/UploadImage",
                    imageUrl: baseUrl + "Upload/Images/{0}" //baseUrl is your root url, for ex: http://yourwebsitename/Upload/Images/test.png
                }
            }
        })

And in my Controller:

        private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg";
        private const int ThumbnailHeight = 80;
        private const int ThumbnailWidth = 80;
        private const string ImagePath = "Upload/Editor";

        private readonly DirectoryBrowser directoryBrowser;
        private readonly ThumbnailCreator thumbnailCreator;

        public ImageLogicController()
        {
            directoryBrowser = new DirectoryBrowser();
            thumbnailCreator = new ThumbnailCreator();
        }

        [HttpPost]
        public ActionResult ReadImage(string path)
        {
            try
            {
                string _path = string.IsNullOrEmpty(path) ? ("~/" + ImagePath) : ("~/" + ImagePath + "/" + path);
                directoryBrowser.Server = Server;

                var result = directoryBrowser
                    .GetContent(_path, DefaultFilter)
                    .Select(f => new
                    {
                        name = f.Name,
                        type = f.Type == EntryType.File ? "f" : "d",
                        size = f.Size
                    });

                return Json(result, JsonRequestBehavior.AllowGet);
            }
            catch (DirectoryNotFoundException)
            {
                throw new HttpException(404, "File Not Found");
            }
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public virtual ActionResult DestroyImage(string path, string name, string type)
        {
            if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(type))
            {
                path = Path.Combine(Server.MapPath("~/" + ImagePath), name);
                if (type.ToLowerInvariant() == "f")
                {
                    DeleteFile(path);
                }
                else
                {
                    DeleteDirectory(path);
                }

                return Json(null);
            }
            throw new HttpException(404, "File Not Found");
        }

        protected virtual void DeleteFile(string path)
        {
            var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path);

            if (System.IO.File.Exists(physicalPath))
            {
                System.IO.File.Delete(physicalPath);
            }
        }

        protected virtual void DeleteDirectory(string path)
        {
            var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path);

            if (Directory.Exists(physicalPath))
            {
                Directory.Delete(physicalPath, true);
            }
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public virtual ActionResult CreateImage(string path, FileBrowserEntry entry)
        {
            var name = entry.Name;

            if (!string.IsNullOrEmpty(name))
            {
                var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), name);

                if (!Directory.Exists(physicalPath))
                {
                    Directory.CreateDirectory(physicalPath);
                }

                return Json(null);
            }

            throw new HttpException(403, "Forbidden");
        }

        [OutputCache(Duration = 3600, VaryByParam = "path")]
        public virtual ActionResult Thumbnail(string path)
        {
            var imgPath = Path.Combine(Server.MapPath("~/" + ImagePath), path);
            if (System.IO.File.Exists(imgPath))
            {
                Response.AddFileDependency(imgPath);
                return CreateThumbnail(imgPath);
            }
            throw new HttpException(404, "File Not Found");
        }

        private FileContentResult CreateThumbnail(string physicalPath)
        {
            using (var fileStream = System.IO.File.OpenRead(physicalPath))
            {
                var desiredSize = new ImageSize
                {
                    Width = ThumbnailWidth,
                    Height = ThumbnailHeight
                };

                const string contentType = "image/png";

                return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType);
            }
        }

        [HttpPost]
        public ActionResult UploadImage(string path, HttpPostedFileBase file)
        {
            var fileName = Path.GetFileName(file.FileName);
            var oFileName = Path.GetFileNameWithoutExtension(file.FileName);
            var extension = Path.GetExtension(file.FileName);
            string temp = DateTime.UtcNow.Ticks.ToString();
            string newFileName = oFileName + "_" + temp + extension;
            string _path = string.IsNullOrEmpty(path) ? ("~/" + ImagePath) : ("~/" + ImagePath + "/" + path);
            var physPath = Path.Combine(Server.MapPath(_path), file.FileName);
            file.SaveAs(physPath);
            return Json(new { name = file.FileName, type = "f", size = file.ContentLength });
        }

        [OutputCache(Duration = 360, VaryByParam = "path")]
        public ActionResult Image(string path)
        {
            var physicalPath = Path.Combine(Server.MapPath("~/" + ImagePath), path);
            if (System.IO.File.Exists(physicalPath))
            {
                const string contentType = "image/png";
                return File(System.IO.File.OpenRead(physicalPath), contentType);
            }
            throw new HttpException(403, "Forbidden");
        }

I hope it help you. Thanks.

Answer 3

Asp.net MVC ImageBrowser Controller for "Kendo ImageBrowser" is here.

private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg";
    private const int ThumbnailHeight = 80;
    private const int ThumbnailWidth = 80;
    private string ImagePath = "/JalalImage/"; //Base Image Directory

    private readonly DirectoryBrowser directoryBrowser;
    private readonly ThumbnailCreator thumbnailCreator;

    public ImageBrowserController()
    {
        directoryBrowser = new DirectoryBrowser();
        thumbnailCreator = new ThumbnailCreator(new FitImageResizer());
    }

    [HttpPost]
    public ActionResult Read(string path)
    {
        try
        {
            var _path = string.IsNullOrEmpty(path) ? (ImagePath) : (ImagePath + "/" + path);
            directoryBrowser.Server = Server;

            var result = directoryBrowser.GetDirectories(_path)
                .Concat(directoryBrowser.GetFiles(_path, DefaultFilter));

            return Json(result, JsonRequestBehavior.AllowGet);
        }
        catch (DirectoryNotFoundException)
        {
            throw new HttpException(404, "File Not Found");
        }
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult Destroy(string path, string name, FileBrowserEntryType EntryType)
    {
        if (!string.IsNullOrEmpty(name))
        {
            path = Path.Combine(Server.MapPath(ImagePath + path), name);
            if (EntryType == FileBrowserEntryType.File)
            {
                DeleteFile(path);
            }
            else
            {
                DeleteDirectory(path);
            }

            return Json(null);
        }
        throw new HttpException(404, "File Not Found");
    }

    protected virtual void DeleteFile(string path)
    {
        var physicalPath = Path.Combine(Server.MapPath(ImagePath), path);

        if (System.IO.File.Exists(physicalPath))
        {
            System.IO.File.Delete(physicalPath);
        }
    }

    protected virtual void DeleteDirectory(string path)
    {
        var physicalPath = Path.Combine(Server.MapPath(ImagePath), path);

        if (Directory.Exists(physicalPath))
        {
            Directory.Delete(physicalPath, true);
        }
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult Create(string path, FileBrowserEntry entry)
    {
        var name = entry.Name;

        if (!string.IsNullOrEmpty(name))
        {
            var physicalPath = Path.Combine(Server.MapPath(ImagePath + path), name);

            if (!Directory.Exists(physicalPath))
            {
                Directory.CreateDirectory(physicalPath);
            }

            return Json(null);
        }

        throw new HttpException(403, "Forbidden");
    }

    [OutputCache(Duration = 3600, VaryByParam = "path")]
    public virtual ActionResult Thumbnail(string path)
    {
        var imgPath = Path.Combine(Server.MapPath(ImagePath), path);
        if (System.IO.File.Exists(imgPath))
        {
            Response.AddFileDependency(imgPath);
            return CreateThumbnail(imgPath);
        }
        throw new HttpException(404, "File Not Found");
    }

    private FileContentResult CreateThumbnail(string physicalPath)
    {
        using (var fileStream = System.IO.File.OpenRead(physicalPath))
        {
            var desiredSize = new ImageSize
            {
                Width = ThumbnailWidth,
                Height = ThumbnailHeight
            };

            const string contentType = "image/png";

            return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType);
        }
    }

    [HttpPost]
    public ActionResult Upload(string path, HttpPostedFileBase file)
    {
        var fileName = Path.GetFileName(file.FileName);
        var oFileName = Path.GetFileNameWithoutExtension(file.FileName);
        var extension = Path.GetExtension(file.FileName);
        var temp = DateTime.UtcNow.Ticks.ToString();
        var newFileName = oFileName + "_" + temp + extension;
        var _path = string.IsNullOrEmpty(path) ? (ImagePath) : (ImagePath + "/" + path);
        var physPath = Path.Combine(Server.MapPath(_path), file.FileName);
        file.SaveAs(physPath);

        return Json(new FileBrowserEntry
        {
            Name = file.FileName,
            EntryType = FileBrowserEntryType.File,
            Size = file.ContentLength
        });
    }

    [OutputCache(Duration = 360, VaryByParam = "path")]
    public ActionResult Image(string path)
    {
        var physicalPath = Path.Combine(Server.MapPath(ImagePath), path);
        if (System.IO.File.Exists(physicalPath))
        {
            const string contentType = "image/png";
            return File(System.IO.File.OpenRead(physicalPath), contentType);
        }
        throw new HttpException(403, "Forbidden");
    }