Editor Path Issues

[Nicolas]

When trying to select an image from the root folder everything is fine, however when selecting an images from a sub-folder the return path is wrong because it includes to following code %2F between the folder name and the image name instead of the /

This was tried under the Telerik demo site and as well as locally.

[Veselin Tsvetanov]

Hi Nicolas,

The %2F is the URL-encoded code for the slash (/) character. That is why, the observed in the ImageBrowser path is the correct one. Here you will find a short video of successfully inserting image in the Editor widget.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nicolas]

Still doesn't work as I got the code embedded into the html link. I never had that before.

And it's not working only for the sub folder as the root folder got the proper path.

Using: version 2018.3.911.Core

 

[Veselin Tsvetanov]

Hi Nicolas,

May I ask you to prepare and send us a small isolated runnable sample reproducing the issue in question? Please, remove any external dependencies and database calls (if any) from that project and make sure it is fully runnable. This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance on that case.

Looking forward to hearing from you.

Regards,
Veselin Tsvetanov
Progress Telerik

[Nicolas]

Hi, Here is a link to download a very simple basic test. It's a zipped file https://1drv.ms/u/s!AlExJ076YAhYgYWRanPoq5oX5O8ty78

Or where can I send you the zip file.

I did not included into the zip file the kendo files js and style, was going to be too big.

Kendo 2108.3.911.Core but i also try the new released version without any success either.

 

Thanks for your help.

[Baracskai]

Hello,

I have the same problem with the subfolder url's. There are any solution?

Thank you!

 

[Veselin Tsvetanov]

Hello Nicolas,

Thank you for the sample prepared, where I was able to observe the issue in question. I have reviewed the case, but was unable to identify the root cause for the discussed. That is why, I will need some more time to further investigate the scenario. As soon as I know something more on that matter, I will let you know.

Regards,
Veselin Tsvetanov
Progress Telerik

[Baracskai]

Hello, I think the {0} parameter in the editor url definition replaces the path as html encoded text. Probably the Html.Raw(...) will solve the problem in the kendo source code.

[Veselin Tsvetanov]

Hi Baracskai, hi Nicolas,

Attached you will find simplified version of the project that Nicolas has sent to us. You will notice that I have placed the following two <img> elements just before the Editor declaration:

<img src="/images/New folder/done.png" alt=""/>

<img src="/images/New%20folder%2Fdone.png" alt=""/>

While running the application, you will notice that it does not display the image, which path has URL encoded characters (/images/New%20folder%2Fdone.png). That is not the expected behavior of the application, as it should properly load resources from URLs which are defined as encoded.

Apart from the above, I have also included another application with exactly the same implementation, which also includes the above two elements. You will notice that both images are properly displayed. Also, the Editor on that app properly loads images, which are served with encoded URLs (as expected).

As you can see, the issue is not related to the Editor widget itself, but to the inability of the app to deal with encoded URLs. Having that said, I would recommend you to carefully review the configuration of the application which does not serve properly resources with encoded URLs and enable that.

Regards,
Veselin Tsvetanov
Progress Telerik

[Baracskai]

Hello,

Thank you. Currently I working on a workaround to overwrite the generated url with this method (Line 2):

1..ImageBrowser(imageBrowser => imageBrowser
2.           .Image("GetImageUrl", "ImageBrowser", new { path = "{0}" })
3.           .Read("Read", "ImageBrowser")
4.           .Create("Create", "ImageBrowser")
5.           .Destroy("Destroy", "ImageBrowser")
6.           .Upload("Upload", "ImageBrowser")
7.           .Thumbnail("Thumbnail", "ImageBrowser")
8.       )

 

When I click on the "Insert" button, the controller method executing:

public ActionResult GetImageUrl(string path) {
       return Content(path); // or return Content("test_path")
   }

 

This has no effect to the inserted url. When I execute the Content("test_path") the url is not changing in the editor.

The inserted editor code:
    <img src="/imagebrowser/getimageurl?path=mappa%2FIMG_20180530_165112.jpg" alt="" />
instead of "test_path" or similar.

What is the return requirement of this method to overwrite the url?

Thank you!

[Nicolas]

Your input drive me to some interesting direction.To make it work again properly I had to downgrade my project with the following steps:

1) .Net Core 2.2 to .NetCore 2.1

2) SetCompatibilityVersion(CompatibilityVersion.Version_2_2) to SetCompatibilityVersion(CompatibilityVersion.Version_2_1) in startup

3) Downgrade to matching NuGet dependencies to 2.1 compatible

4) Compile and run

5) Upgrade everything back to .Net Core 2.2

6) compile and now it works.

It seems that Visual Studio 2019 RC is doing weird stuff on creation of .Net Core app with Razor in regard to System.Uri and UnescapeDataString

I don't know if it is fully functional since I did not make the site live on server yet, but cross my finger.

 

Thanks

[Nicolas]

Actually is't not working, just going back and staying in .Net Core 2.1 works but coming back is an issue. :-(. But yes it must be something to do Visual Studio or something in that line. I also try with .Net Core 3.0 without any success

[Nicolas]

As for the reply I got from ASPNet Core Team, why the imagebrowser is using some this kind of path where it should not anymore.

I'm lost in there. What should be done then?

Reply from ASPNet Core Team.

1. Any url is a kind of complete address to some resource(file) in network. But according to the rules of how it must be actually (to work as you expect), its expected that a few characters must have some specific meaning; just like in this case: "/" means a separator that separates the individual elements of your address(url). So, "/" is actually a seperator, but "%2f" becomes an ordinary character that simply represents "/" character in element of your url. You should not change the path separator.
2. From debugging on the  source code of Asp.net Core, it does not seem to be a bug , but by design . Reasons are as follows:
Firstly ,The Asp.Net Core team designed to skip "%2f" in UrlDecoder.cs before generating Http ( or Httpcontext ) , you could refer to https://github.com/aspnet/KestrelHttpServer/blob/5d80016b4fb991acf6f639549b784ed5882d8de0/src/Kestrel.Core/Internal/Http/UrlDecoder.cs#L324
Secondly, according to the commit history on [GitHub](https://github.com/aspnet/HttpAbstractions/commit/0da88e0dda36d48ae68ac24289c349605cd94828#diff-a53064f49ddacce4c10371dc9e164fd9), the ASP.NET Core team tends to prevent any double decoding behavior. That's means the `%2F` should not be decoded at all even during serving static files .

[Nicolas]

I think I got the issue now.

The config seems to be out of wack when creating a web aspnet core project.  This setting seems to be the issue <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>, so by removing this it does work for now.

 

[Veselin Tsvetanov]

Hello Nicolas,

Thank you for all the effort. I am really happy to hear that you have identified the configuration option that controls the discussed behavior. I also believe that your findings will be helpful for other developers too.

Regards,
Veselin Tsvetanov
Progress Telerik

[Baracskai]

Hello,

In my case the suggestion by Nicolas not solve the problem.

There are any other way to override the url?

 

[Veselin Tsvetanov]

Hi Baracskai,

Could you, please prepare and send us a small isolated runnable sample reproducing the issue observed at your end? This way we will be able to further troubleshoot the case.

Regards,
Veselin Tsvetanov
Progress Telerik

[Baracskai]

Hi,

Unfortunatelly it is not easy, I work on a huge project.

My question posted at "14 May" it's a wrong way? Can you explain please the detailed working of the .Image("GetImageUrl", "ImageBrowser", new { path = "{0}" }) method?

It is good for me to overwrite the url manually (replace %2F to "/" char).

Thanks!

 

[Nicolas]

Hi Baracskai.

Did you try to edit the project file YourApplicationName.csproj
and remove or comment those settings as below

<PropertyGroup>

    <TargetFramework>netcoreapp2.2</TargetFramework>
    <UserSecretsId>aspnet-*******</UserSecretsId>
    <Authors>Nicolas Liebel</Authors>
    <Company>Energie Design</Company>
    <Description>Web site</Description>
    <Copyright>All rights reserved</Copyright>
    <!--<AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>-->
    <!--<AspNetCoreHostingModel>OutOfProcess</AspNetCoreHostingModel>-->
    <!--<AspNetCoreModuleName>AspNetCoreModule</AspNetCoreModuleName>-->
  </PropertyGroup>

When change just re-open the project and make sure you clear the cache in your testing browser so you don't have trailing cache.

When publishing live make sure that the web.config is also not having that InProcess or OutProcess

Before:

<aspNetCore processPath="dotnet" arguments=".\yourapplication.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="OutOfProcess" />

After:

<aspNetCore processPath="dotnet" arguments=".\yourapplication.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" />

 

 

Nicolas

[Veselin Tsvetanov]

Hello Baracskai,

If that would suite your needs, you could modify the source code of the Kendo Editor, so that it does not encode the slashes in the URL:

var TYPEFIELD = "type";
var NAMEFIELD = "name";
var trimSlashesRegExp = /(^\/|\/$)/g;
var isFunction = kendo.isFunction;


function concatPaths(path, name) {
    if (path === undefined || !path.match(/\/$/)) {
        path = (path || "") + "/";
    }
    return path + name;
}

kendo.ui.ImageBrowser.fn.value = function () {
    var that = this,
        selected = that._selectedItem(),
        path,
        imageUrl = that.options.transport.imageUrl;

    if (selected && selected.get(TYPEFIELD) === "f") {
        path = concatPaths(that.path(), selected.get(NAMEFIELD)).replace(trimSlashesRegExp, "");
        if (imageUrl) {
            path = isFunction(imageUrl) ? imageUrl(path) : kendo.format(imageUrl, path);
        }
        return path;
    }
};

Attached you will find a sample project implementing the above.

Please, keep in mind that the suggested implementation has not been extensively tested. Therefore, I would suggest you to carefully review that for any undesirable side effects before using it.

Regards,
Veselin Tsvetanov
Progress Telerik

[Baracskai]

Thank you very much, this js code fix my problem. :)

@Nicolas: unfortunatelly this solution not working for me.

 

[hassan]

Same issue, on Telerik UI for MVC Core 2020... I use razor...

Any idea what to do?

 

Also note that i use standard serializer and i went through hell to find out the issue was that my serializer used "name", "size"... but kendo demo used "Name", "Size" .... with first letter in capital.

So i override read and modify it like this...

public override JsonResult Read(string path)
{
    var data = base.Read(path);
    //if (data.SerializerSettings == null)
    //    data.SerializerSettings = new JsonSerializerSettings();
    //((JsonSerializerSettings)data.SerializerSettings).ContractResolver = new DefaultContractResolver();

    // .Net MVC
    //var settings = new JsonSerializerSettings
    //{
    //    ContractResolver = new CamelCasePropertyNamesContractResolver()
    //};
    var options = new JsonSerializerOptions
    {
        PropertyNamingPolicy = null
    };

    var list = ((FileBrowserEntry[]) data.Value).Select(s => new
    {
        s.Name,
        s.Size,
        s.EntryType
    }).ToList();
    return Json(list, options);
}

[Veselin Tsvetanov]

Hi Hassan,

Have you tried the suggestions from the previous replies in the current thread? If yes, and that does not resolve the issue faced, I would like to ask you to prepare and send us a small isolated runnable sample replicating the problem in question.

Regards,
Veselin Tsvetanov
Progress Telerik

[hassan]

That worked perfectly fine... I just add it after loading kendo script

@section HeadScripts
{
    <script src="/lib/kendo/js/kendo.all.min.js"></script>
    <script src="/lib/kendo/js/kendo.aspnetmvc.min.js"></script>
    <script>
        window.kendoTheme = "default-v2";
        window.kendoCommonFile = "common-empty";


        var TYPEFIELD = "type";
        var NAMEFIELD = "name";
        var trimSlashesRegExp = /(^\/|\/$)/g;
        var isFunction = kendo.isFunction;
 
 
        function concatPaths(path, name) {
            if (path === undefined || !path.match(/\/$/)) {
                path = (path || "") + "/";
            }
            return path + name;
        }
 
        kendo.ui.ImageBrowser.fn.value = function () {
            var that = this,
                selected = that._selectedItem(),
                path,
                imageUrl = that.options.transport.imageUrl;
 
            if (selected && selected.get(TYPEFIELD) === "f") {
                path = concatPaths(that.path(), selected.get(NAMEFIELD)).replace(trimSlashesRegExp, "");
                if (imageUrl) {
                    path = isFunction(imageUrl) ? imageUrl(path) : kendo.format(imageUrl, path);
                }
                return path;
            }
        };
    </script>
}

 

Also one more question... Isn't there any way to move kendo script to bottom of the page? they say script in head affect the performance... and as you already know, every millisecond matters in this world with too many website ranking not just by their material, but also by their speed... and so many script affecting that

[Veselin Tsvetanov]

Hi Hassan,

I am happy to hear that you have resolved the issue faced.

As per the script position, you could move it to the <body> of the page as long as the following are fulfilled:

- The Kendo HTML helpers are deferred;

- The deferred scripts are called after the kendo.all.min.js and the kendo.aspnetmvc.min.js are loaded on the page:

    <script src="/lib/kendo/js/kendo.all.min.js"></script>
    <script src="/lib/kendo/js/kendo.aspnetmvc.min.js"></script>
    <script>
        window.kendoTheme = "default-v2";
        window.kendoCommonFile = "common-empty";
...
    </script>
    @Html.Kendo().DeferredScripts()

Note that the above will not lead to a faster load of the Kendo widgets. It will, however, allow you to load faster the other content on the page. In case you need to load faster also the Kendo widgets, I would suggest you create your own custom script that contains only the widgets used in your application:

https://docs.telerik.com/kendo-ui/intro/installation/what-you-need

Regards,
Veselin Tsvetanov
Progress Telerik