ImageBrowser not firing when Destroy

[Shawn]

I am using the MVC wrapper and I'm able to get all working except the Destroy option, it never fires the AJAX post like the example.  The only difference between my setup and the example  is that I am using Azure Blob as my image storage.  Read, Upload and Thumbnails work great.  Below is my current code.

Also, I am not able to have the 2 scripts listed below included on the same page.  This creates problem number 2 for me. I canot get the grid to sort and filter without the "kendo.aspnetmvc.min.js" script. When I do included this feature work for the grid but then it breaks my editor.

Please remember that this page is a test page only.  Thanks in advance for your help.  - Shawn


@using Kendo.Mvc.UI;
@{
    Layout = "";
    ViewBag.Title = "Test_KendoUI";
    AcctInfo acctInfo = (AcctInfo)Session["AcctInfo"];
}
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.common.min.css")" />
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.default.min.css")" />

<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/jquery.min.js")"></script>
@* Need below script for Editor ImageBrowser to work properly *@
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.web.min.js")"></script>    
@* Need below script for GRID to Work properly BUT CANNOT have both scripts. When the below script is included the imagebrowser loads "Undefined" folders as the images when opened.
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.aspnetmvc.min.js")"></script>
*@

<h2>Test_KendoUI</h2>


@(
    Html.Kendo().Editor()
        .Name("EmailMessage")
        .HtmlAttributes(new { style = "width: 740px;height:440px" })
        .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
            .InsertUnorderedList().InsertOrderedList()
            .Outdent().Indent()
            .CreateLink().Unlink()
            .InsertImage()
            .SubScript()
            .SuperScript()
            .TableEditing()
            .ViewHtml()
            .Formatting()
            .FontName()
            .FontSize()
            .FontColor().BackColor()
        )
        .Value("")
        .ImageBrowser(imageBrowser => imageBrowser
        .Image("http://pas.blob.core.windows.net/users/" + @acctInfo.accountOwnerUserID + "/files/Images/{0}") // image location URL              
        .Read("_getImages", "Common") // get files
        .Create("_createDir", "Common") // create folder/directory
        .Destroy("_deleteImage", "Common") // delete file or folder
        .Upload("_uploadImage", "Common")  // add new file
        .Thumbnail("_getThumbnailImages", "Common")  
        .FileTypes("*.jpg,*.png,*.gif,*.jpeg,*.bmp")               
        )
)

[Atanas Korchev]

Hello Shawn,

You are probably not using the EditorImageBrowserController which is required when using kendo.aspnetmvc.min.js. You can check this demo (the ASP.NET MVC tab).

Regards,
Atanas Korchev
Telerik

[Atanas Korchev]

Hi Shawn,

In addition you can review the implementation of this code library project: http://www.kendoui.com/code-library/mvc/editor/save-read-images-into-the-database-with-imagebrowser.aspx. It shows how to implement a custom image storing.

Regards,
Atanas Korchev
Telerik

[Shawn]

Thanks for your reply. I referenced the Controller "Common" in the editor helper as you can see in the code.  The read, upload and thumbnails work perfectly.  Is it MANDATORY to reference the ImageBrowser controller?  Also, this does not resolve my issue with including both JS files.

I have to include both of the following JS files to get the KendoUI Grid to work properly (sort, filter, etc...) BUT then the EDITOR is broken ("undefined" folders in place of the images).

<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.web.min.js")"></script> 
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.aspnetmvc.min.js")"></script>

Thanks,
Shawn

[Atanas Korchev]

Hi Shawn,

Did you check the linked code library project? It includes both JavaScript files and doesn't show undefined folders. The interesting code is ImageBrowserController which implements the IImageBrowserController interface and provides all file browsing capabilities.

Inheriting from EditorImageBrowserController is suitable only in cases when your files are stored in the file system. In your case you need to implement the IImageBrowserController interface in a way similar to the linked code library.

Regards,
Atanas Korchev
Telerik

[Shawn]

Yes, I downloaded the project from the link you provided and adjusted my project to match accordingly except for the actual controller action methods that read, upload, destroy, etc. They were built to utilize Azure Blob.  Using the MVC Editor Helper, I get the following issues.

I can only include the web JS file "kendo.web.min.js", if I include both the web JS file and  the "kendo.aspnetmvc.min.js" file then the images do not load just "undefined" folders.  If I remove the "kendo.aspnetmvc.min.js" file then all works except destroy. Of course, the grid does not work properly when the "kendo.aspnetmvc.min.js" file is NOT included.

I removed the MVC Editor helper from the page then I included both JS files and used the following JS for the editor. IT WORKS!  Please keep in mind that I am using the same controller and action methods as I did with the MVC helper.  JS is below along with Controller.  Please explain why it works with KendoUI Javascript and NOT the KendoUI MVC Helper?

$("#editor").kendoEditor({
            tools: [
                "bold", "italic", "underline", "strikethrough",
                "fontName", "fontSize", "foreColor", "backColor",
                "justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
                "insertUnorderedList", "insertOrderedList", "indent", "outdent",
                "createLink", "unlink", "insertImage",
                 "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn",
                 "formatting", "insertHtml", "viewHtml"
            ],
            imageBrowser: {
                transport: {
                    read: "/imagebrowser/read",
                    destroy: "/imagebrowser/destroy",
                    create: "/imagebrowser/create",
                    uploadUrl: "/imagebrowser/upload",
                    thumbnailUrl: "/imagebrowser/thumbnail",
                    imageUrl: "http://pas.blob.core.windows.net/users/@acctInfo.accountOwnerUserID/files/Images/{0}",
        }




namespace UI_Admin.Controllers
{
    public class ImageBrowserController : BaseController, IImageBrowserController
    {

        // Not in use
        public ActionResult Image(string path)
        {
            throw new HttpException(404, "File Not Found");
        }


        // not in use at this time
        public ActionResult Create(string path, ImageBrowserEntry entry)
        {

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



        public ActionResult Destroy(string path, ImageBrowserEntry entry)
        {
            bool deleted = Core.Models.BusinessLogic.Admin.CommonBL.ImageBrowser.DeleteImage(acctInfo.accountOwnerUserID, entry.Name);
            
            if(deleted)
                return null;

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



        public JsonResult Read(string path)
        {
            var azureImages = CommonBL.ImageBrowser.GetImages(acctInfo.accountOwnerUserID);
            return Json(azureImages, JsonRequestBehavior.AllowGet);
        }



        public ActionResult Thumbnail(string path)
        {
            const string contentType = "image/png";
            Stream imageStream = Core.Models.BusinessLogic.Admin.CommonBL.ImageBrowser.GetThumbnail(path, acctInfo);

            if (imageStream != null)
                return File(imageStream, contentType);

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



        public ActionResult Upload(string path, HttpPostedFileBase file)
        {

            if (Request.Files.Count > 0)
            {
                HttpPostedFileBase fileData = this.Request.Files["file"];
                var baseUrl = "http://pas.blob.core.windows.net/users/" + acctInfo.accountOwnerUserID + "/files/Images/";
                string fileName = Core.Models.BusinessLogic.Admin.CommonBL.ImageBrowser.UploadImage(acctInfo.accountOwnerUserID, fileData);
                var filelink = baseUrl + fileName;
                var json = new
                {
                    name = fileName,
                    type = "f",
                    size = fileData.ContentLength
                };
                return Json(json);
            }

            return null;

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


    }
}

[Shawn]

After further investigation and extensive testing (hours) here is what I have discovered.  When using the MVC helper the javascript is generate as expected for the editor.  The following ImageBrowser configuration is added for the ImageBrowser.

"type": "imagebrowser-aspnetmvc",

When this is removed manually the editor and ImageBrowser work perfectly, when this configuration is present, the ImageBrowser shows "Undefined" folders when the ImageBrowser loads.

Please help me resolve this issue.

Thanks, Shawn

[Atanas Korchev]

Hi Shawn,

This could happen if you are not returning the images in the JSON format expected by the ASP.NET MVC wrapper of the editor. The linked code library project is serializing the data from the Read method like this:

[{"Name":"My Folder","Size":0,"EntryType":1},{"Name":"New folder","Size":0,"EntryType":1},{"Name":"Penguins.jpg","Size":0,"EntryType":0},{"Name":"Chrysanthemum.jpg","Size":0,"EntryType":0}]

EntryType = 1 indicates a directory whereas EntryType= 0 indicates a file.

You can try using the Kendo.UI.Mvc.ImageBrowserEntry class which is serialized to the aforementioned JSON format:

        public JsonResult Read(string path)
        {
            var azureImages = CommonBL.ImageBrowser.GetImages(acctInfo.accountOwnerUserID);
            var editorImages = azureImages.Select(image => new ImageBrowserEntry
            {
                   Name = image.Name,
                   EntryType = ImageBrowserEntryType.File
            });
            return Json(editorImages , JsonRequestBehavior.AllowGet);
        }


Regards,
Atanas Korchev
Telerik

[Shawn]

OK, making that small adjusted did the trick BUT according to your documentation the TYPE was incorrect.  Below is a snippet from your Docs.

[
{ "name": "foo.png", "type": "f", "size": 73289 },
{ "name": "bar.jpg", "type": "f", "size": 15289 },
...
]
Where name is the file or directory name, type is either "f" for file or "d" for directory, and size is the file size (optional).

Of course, when I developed the code I built it according to your Docs which only worked with the JavaScript Editor and NOT the MVC wrapper.  Just for the record, it is sort of inconsistent when the MVC wrapper builds the JavaScript to read from the same source as the JavaScript editor and it does not work. 

Maybe it's just me.

Thanks,
Shawn