Thumbnails image caching problem on renaming file?

[tomexou]

I use a FileExplorer to list images on a folder with its ExplorerMode="Thumbnails". The snapshot is as : http://i.imgur.com/cpKRY9j.png

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer2"
    Height="200px" Width="100%"
    DisplayUpFolderItem="true"
    VisibleControls="Toolbar,FileList,ContextMenus"
    ExplorerMode="Thumbnails"
    EnableCreateNewFolder="false"
    AvailableFileListControls="All"
    >
    <Configuration
        ViewPaths="~/File/Product/5/Image/L"
        UploadPaths="~/File/Product/5/Image/L"
        DeletePaths="~/File/Product/5/Image/L"
        AllowMultipleSelection="true"
        EnableAsyncUpload="true"
        MaxUploadFileSize="20971520"
        SearchPatterns="*.jpg" />
</telerik:RadFileExplorer>

I want to swap two images by renaming its name. The rename operation is succeeded but its image is wrong.
The image seems to be caching and show the old image after ranamed.

These client functions have be tested such as clearFolderCache(), refresh(), loadFolder(path) on OnClientMove() client event (see official help).
Unfortunately, it's not working.

Please kindly give some advices for this, thanks.

[Joana]

Hello,

Thank you for contacting us.

I tested the described behavior and logged it in our bug tracking system. You could track its progress here in our feedback portal. However, we'll need additional time to investigate the cause of the issue and I'll write you back once I have more information and if there's a possible workaround.


Regards,
Joana
Telerik

[tomexou]

Thanks, Joana.

The issue which could be reproduced is usually be fixed sooner.
Expect it.

[Vessy]

Hi,

We reviewed the behavior in details and I could confirm that it is a browser behavior.

A possible way to force the browser to delete the cached images is to add a cache bustlering string to the thumbnails url's. You can achieve that by modifying the client template used for the Listview items (the FileExplorer's thumbnails) in a similar way:

RadFileExplorer1.FileList.ListView.ClientSettings.DataBinding.ItemTemplate =
        @"<li class=""rfeThumbList rlvI"">
    <a href=""javascript: void 0;"" class=""rfeLink rlvDrag#= isSelected ? ' rfeSelectedLink' : ''#"" data-index=""#= index #"" title=""#= Name #"">
        <span class=""rfeFile#= Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension) ? ' rfeImageFile' : '' #"">
        # if(Telerik.Web.UI.FileExplorerHelper.isWebImage(item.Extension)) {#
            <img src=""#= item.Url || Path#?#=Math.random()# "" alt=""#= Name #"" width=""32"" height=""32"" />
        # } else { #
            <span class=""rfeFileIcon #= Telerik.Web.UI.FileExplorerHelper.getThumbnailCSSExtension(item) #""></span>
        # } #
        </span>
        <span class=""rfeThumbTitle"">#= Name #</span>
    </a>
</li>";

Please note, that the thumbnails are not the only images which are cached by the browser and you will most probably experience the same behavior when trying to open an image having the same name as an already cached one. This behavior can be workarounded by handling the FileExplorer's ClientFileOpen event like follows:

<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" ExplorerMode="Thumbnails" OnClientFileOpen="onFileOpen">
    <Configuration ViewPaths="~/images/Test" UploadPaths="~/images/Test" DeletePaths="~/images/Test" />
</telerik:RadFileExplorer>
<script>
    function onFileOpen(explorer, args) {
        var newUrl = args.get_path() + "?" + Math.random();
        args.get_item().set_url(newUrl);
    }
</script>

Hope this helps.

Regards,
Vessy
Telerik