ImageBrowser shows "undefined" items

[Baracskai]

Hello,

 

I have problem with the ImageBrowser component inside the Editor component in .NET Core 2.2. (It's working in the local example, but I not find the difference)

I use the local example as starting point, I copy the code from the example to my project. 

1. My controller:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using MyCoreSite.Models.Image;
using MyCoreSite.Mvc.Attributes;

namespace MyCoreSite.Areas.Admin.Controllers
{
    [ViewLayout("_LayoutAdmin")]
    public class ImageBrowserController : EditorImageBrowserController
    {
        private const string contentFolderRoot = "shared/";
        private const string folderName = "Images/";
        private static readonly string[] foldersToCopy = new[] { "shared/images/employees" };

        /// <summary>
        /// Gets the base paths from which content will be served.
        /// </summary>
        public override string ContentPath
        {
            get
            {
                return CreateUserFolder();
            }
        }

        public ImageBrowserController(IHostingEnvironment hostingEnvironment)
            : base(hostingEnvironment)
        {
        }

        public override JsonResult Read(string path)
        {
            var z = base.Read(path);
            return z;
        }

        private string CreateUserFolder()
        {
            var virtualPath = Path.Combine(contentFolderRoot, "UserFiles", folderName);
            var path = HostingEnvironment.WebRootFileProvider.GetFileInfo(virtualPath).PhysicalPath;

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
                foreach (var sourceFolder in foldersToCopy)
                {
                    CopyFolder(HostingEnvironment.WebRootFileProvider.GetFileInfo(sourceFolder).PhysicalPath, path);
                }
            }
            return virtualPath;
        }

        private void CopyFolder(string source, string destination)
        {
            if (!Directory.Exists(destination))
            {
                Directory.CreateDirectory(destination);
            }

            foreach (var file in Directory.EnumerateFiles(source))
            {
                var dest = Path.Combine(destination, Path.GetFileName(file));
                System.IO.File.Copy(file, dest);
            }

            foreach (var folder in Directory.EnumerateDirectories(source))
            {
                var dest = Path.Combine(destination, Path.GetFileName(folder));
                CopyFolder(folder, dest);
            }
        }
    }
}

2. My view:

@* Make sure tag helpers are not available for the Editor content *@
@removeTagHelper "*, Microsoft.AspNet.Mvc.Razor"
@removeTagHelper "*, Microsoft.AspNetCore.Mvc.Razor"

@{
    ViewBag.Title = "Template";
    PageInfo PI = ViewBag.PI;
}

<div class="content-heading">
    <div>
        Page title
        <small>Subtitle</small>
    </div>
</div>
<div class="row">
    <div class="col-xl-12">
        <url class="nav-link text-dark" asp-area="Admin" asp-controller="ImageBrowser" asp-action="Index"><localize>Image Browser</localize></url>
    </div>
    <div class="col-xl-12">
        @(Html.Kendo().Editor()
       .Name("editor")
       .HtmlAttributes(new { style = "width: 100%;height:440px" })
       .Tools(tools => tools
           .Clear()
           .Bold().Italic().Underline().Strikethrough()
           .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
           .InsertUnorderedList().InsertOrderedList()
           .Outdent().Indent()
           .CreateLink().Unlink()
           .InsertImage()
           .InsertFile()
           .SubScript()
           .SuperScript()
           .TableEditing()
           .ViewHtml()
           .Formatting()
           .CleanFormatting()
           .FontName()
           .FontSize()
           .ForeColor().BackColor()
           .Print()
        )
        .ImageBrowser(imageBrowser => imageBrowser
            .Image("~/shared/UserFiles/Images/{0}")
            .Read("Read", "ImageBrowser")
            .Create("Create", "ImageBrowser")
            .Destroy("Destroy", "ImageBrowser")
            .Upload("Upload", "ImageBrowser")
        )
       .Value(@<text>
                <p>
                  Example
                </p>
               </text>)
        )
    </div>
</div>

@section Styles {

}

@section Scripts {

}

 

3. The result:

[Attached file: teler1.jpg]: It's shows undefined items. The image file structure can be find at the right. The item and file count are equal.

[Attached file: teler2.jpg]: It seems that the control detect the files as a directory instead of file.

4. Reference scripts used:

<script src="/js/telerik/jszip.min.js"></script>
<script src="/js/telerik/kendo.all.min.js"></script>
<script src="/js/telerik/kendo.aspnetmvc.min.js"></script>
<script src="/js/telerik/cultures/kendo.culture.en-US.min.js"></script>
<script src="/js/telerik/messages/kendo.messages.en-US.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        kendo.culture("en-US");
    });
</script>

 

Can you help me please solve this problem?

Thank you!

[Dimitar]

Hello Baracskai,

I am attaching an ASP.NET Core application that demonstrates the basic setup of the Editor Image Browser. With it, the tool is correctly initialized and saves/loads data from the specified public folders.

In general, from the provided code snippet I noticed that the defined paths are different, which might be causing issues when trying to insert the image in the Editor:

private const string folderName = "Images/";
private static readonly string[] foldersToCopy = new[] { "shared/images/employees" };

I would suggest inspecting the attached example and using it as a starting point.

Regards,
Dimitar
Progress Telerik

[Baracskai]

Hello,

Thank you! The upper- and lowecase "I" was the problem, I change it to lowercase and it works, but I have a new problem.

I cannot override the "Thumbnail" method. The debugger not stopping at this line at runtime and the thumbnail not showing.

public override IActionResult Thumbnail(string path)
{
    return base.Thumbnail(path); // <- Debug point at this line
}

 

Thank you!

[Dimitar]

Hello Baracskai,

Currently, the System.Drawing library is not part of ASP.NET Core, thus in order to generate a preview for the uploaded images, a third-party library should be used. Additional information can be found in the following article:

• https://devblogs.microsoft.com/dotnet/porting-to-net-core/

You can check out the System Drawing Common ported library for .NET Core in order to verify it is a suitable candidate for generating the image previews:

• https://www.nuget.org/packages/System.Drawing.Common/

Concerning the method override - you have used the correct signature. However, in order for the method to be executed, the Editor's configuration has to include the Thumbnail() property:

.ImageBrowser(imageBrowser => imageBrowser
  .Image("~/shared/UserFiles/Images/{0}")
  .Thumbnail("Thumbnail", "ImageBrowser")
  .Read("Read", "ImageBrowser")
  .Create("Create", "ImageBrowser")
  .Destroy("Destroy", "ImageBrowser")
  .Upload("Upload", "ImageBrowser")
)

Regards,
Dimitar
Progress Telerik

[Baracskai]

Hello,

Thank you! I insert the missing part and the debugging is ok now.

I modify the Thumbnail method to view thumbnails from file and its working fine:

 

 public override IActionResult Thumbnail(string path)
        {
            var thumbPath = Path.Combine(HostingEnvironment.WebRootPath, My.Settings.Folders.TelerikEditorImageUploadPath, path.GetThumbFileName());
            return File(System.IO.File.ReadAllBytes(thumbPath), MimeTypes.GetMimeType(thumbPath));
        }