Image manager - overwrite issue

[eyal]

Hi,

When you upload a new image (with same name as one that already exists) and select the "overwrite if file exists?", the new image is saved as expected (overwrites the old) but the preview pane shows the old image and also insert the old to the editor. However, when you open the image editor, it shows the new saved image (see attached screeshot). The preview pane is not updated even after navigating away from the editor page.

br,
eyal

[Rumen]

Hi Eyal,

The reported behavior is by design and is due to the image caching which is enabled by design in the editor's Image manager.

If the images are not cached then this will drastically decrease the Image loading and displaying performance in the Image Manager - the manager will become very slow if a huge amount of files are populated in it. Each image will be downloaded again and again once the user clicks its item in the treeview or grid. This will also consume internet bandwidth.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[eyal]

Hi Rumen and thank you for your answer.

I understand the caching necessity, but it conflicts with the overwriting function in a way that makes this function partly unusable. I wrote 'partly' because the new overwriting file is indeed saved but the client can't access it or use it.

Would it be reasonable to empty the cache only after overwriting, so that the image list is repopulated. Or maybe just remove the overwritten image from the cache if that is possible. I believe overwriting does not happen often, although I was informed about it by one of our clients.

br,
eyal

[Lini]

Hi Eyal,

The problem is that we have no control over caching of specific files. The server (IIS) and browser are the ones that decide whether a file should be downloaded or loaded from cache. What we can do is disable caching of previewed images altogether, but this will slow down browsing a lot - as my colleague Rumen explained. The image caching is not enabled by the image manager dialog (or any of our code) explicitly.

As a test, you can try a web site in IIS and then try it in the ASP.NET Development Server that comes with Visual Studio. You will see that the problem exists in IIS (because of its caching configuration) and that the images are correctly updated after upload in the dev server (because it does not use caching).

Greetings,
Lini
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[eyal]

Thank you Lini.
I tested this issue on several browsers. So far I have managed to reproduce it only on IE7 / IE8, so I guess the browser is the one to blame ;)
On other tested browsers (firefox 3.5, chrome 3, safari 4), the new image is updated on the image manager as expected.

I suggest logging this issue for letting other developers be aware of it.

br,
eyal

[Nicola Farina]

Hi there,

same situation in modern days?

I see the same "issue" on IE 9 and FF 13.

Any new workaround?

Thanks.

[Nicola Farina]

Hi there,

same situation in modern days?

I see the same "issue" on IE 9 and FF 13.

Any new workaround?

Thanks.



P.S. Doubled post caused by forum engine crash :)

[Rumen]

Hello,

You can solve the problem by following the steps below:
1) Register the external dialogs of RadEditor:
1.1) Copy the EditorDialogs installation folder to the root of the web application / web site
1.2) Set the ExternalDialogsPath to point to the EditorDialogs folder

<telerik:radeditorrunat="server" ExternalDialogsPath="~/EditorDialogs" ID="RadEditor1">
<ImageManager ViewPaths="~/"UploadPaths="~/"/>
<TemplateManager ViewPaths="~/"UploadPaths="~/"/>
</telerik:radeditor>

2) Open the EditorDialogs\ImageManager.ascx file and add a random query string to the image src, which will tell the browser to refresh the image automatically and to not cache it, e.g.

//NOTE: we cannot use a random src to bypass the IE browser cache in the source code, because it will make browsing images a lot slower 

img.src = src + "?param=" + Math.random();


Best regards,
Rumen
the Telerik team

[Paul]

Can you make the random query string option be a feature in the ImageManager that could be toggled, please? Let the client (us) make the decision about browser performance. If possible, make the feature intelligent where it can know images to re-load.

[Vessy]

Hi Paul,

Thank you for your suggestion. Please, submit a feature request describing the exact functionality you expect in our Feedback portal, so the other clients can vote for it and our developers will consider its implementation:
http://feedback.telerik.com/Project/108/Feedback/List/Feedback

Regards,
Vessy
Telerik

[DENNIS]

Rumen's solution of changing the EditorDialogs worked for me.  We also wanted to update the documents already in the RadEditor, so I added a tool to update the images.  Here is the relevant jquery that I used:

function refreshImages(editor) {

    var newID = Math.random();
    var hTML = editor.get_html(true);
    var $html = $(hTML);
    $html.find("image").each(function (i) {
        var src = $(this).attr("src");
            if (src.indexOf("?") > 0) {
                src = src.substring(0, src.indexOf("?") + 1) + "param=" + newID;
            } else {
                src += "?param=" + newID;
            }
            $(this).attr("src", src);
    });
    editor.set_html($("<p>").append($html).html());
}

 

 

[Vessy]

Hi DENNIS,

Thank you for sharing your solution with our community - I hope it would spend some time to the other users facing the same issue.

Regards,
Vessy
Telerik

[Ferdiyan]

Hi rumen, can you tell me abiut webconfig with radeditor external path?

[Rumen]

Hi Ferdiyan,

The ExternalDialogsPath can be set inline, in the codebehind of if you want to apply it through a central location to multiple editors you can use ASP.NET Theme -> skin file for this: Use Themes.

The supported properties which can be set in the web.config are listed in this article Control Properties You Can Set From the web.config.

Best Regards,
Rumen
Progress Telerik