Thumbnails

[Kjell]

I set: ExplorerMode="Thumbnails"
The images are about 10 mb each, and it takes a long time to load the images to thumbnails visible.
Is there any way to get around the problem?

[Dobromir]

Hello,

At present, RadFileExplorer does not offer functionality to modify the Thumbnail template but we are planning to introduce such feature in one of the upcoming releases.

For the time being, you can modify the template by replacing the current ItemTemplate of the control's underlying ListView. The following is the original template used by RadFileExplorer, you can modify it to use smaller (thumbnail) images instead of original ones

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 #"" 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>";

I hope this helps.


Greetings,
Dobromir
the Telerik team

[Kjell]

Do not understand how / where I put this?
using vb

My RadeFileExplorer....

<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server"
BackColor="white"
EnableOpenFile="False"
EnableCreateNewFolder="False"
Language="sv"
OnClientFileOpen="OnClientFileOpen"
Skin="Black"
VisibleControls="Grid, Toolbar, ContextMenus">
        <Configuration
        DeletePaths="~/filmtips/filmgrafik/"
        ViewPaths="~/filmtips/filmgrafik/"
        UploadPaths="~/filmtips/filmgrafik/"
        MaxUploadFileSize="10485760" />
</telerik:RadFileExplorer>

[Vessy]

Hi Kjell,

You have to place the code snippet, provided by Dobri, in the Page_load event of the page, containing the FileExplorer:

protected void Page_Load(object sender, EventArgs e)
{
    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 #"" 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 most probably you will need to extend the template in order to fit your custom requirements (e.g. to set the src to the created thumbnails).

Kind egards,
Vesi
the Telerik team

[Kjell]

I can unfortunately not set src to the code that I want it :-(
The ViewPaths is:  "~/filmtips/Filmgrafik"
I try to put Thumbnails in another folder: "~/filmtips/thumb"

How do I modify the string to it?

"<img src=""#= item.Url || Path #"" alt=""#= Name #"" width=""32"" height=""32"" />"

[Vessy]

Hi Kjell,

To achieve the desired functionality you should implement a custom FileBrowserContentProvider. Then you have to change the behavior of the ResolveDirectory method as the easiest way to do this is to subclass the default provider (Telerik.Web.UI.Widgets.FileSystemContentProvider)  and override that method only.

For example, you could set the file's URL to the desired thumbnail (in the folder where the custom thumbnails are stored) in the overwritten method:

Public Overrides Function ResolveDirectory(path As String) As DirectoryItem
    Dim oldItem As DirectoryItem = MyBase.ResolveDirectory(path)
    Dim pageContainsRadFileExplorer As Page = TryCast(HttpContext.Current.Handler, Page)
    Dim rootDir As String = pageContainsRadFileExplorer.ResolveUrl("~/")

    For Each fileItem As FileItem In oldItem.Files
        fileItem.Url = String.Format("{0}Images/Thumbnails/{1}", rootDir, fileItem.Name)
    Next

    Return oldItem

End Function

The specific thing here is that the default content provider does not set URLs and when you implement it every image will be a link to its thumbnail but not to itself. This could be workarounded with the following handler, attached to the OnClientFileOpen event, which will bring back the original paths to the images:

<telerik:RadFileExplorer ID="FileExplorer1" runat="server" OnClientFileOpen="explorerFileOpen">
    <Configuration ViewPaths="~/Images" UploadPaths="~/Images" />
</telerik:RadFileExplorer>

<script type="text/javascript">
    function explorerFileOpen(explorer, args) {
        args.get_item().set_url(args.get_item().get_path());
    }
</script>

Following a similar logic, you could also overwrite the StoreFile method, associating a thumbnail to every new image which is being uploaded.

For your convenience I am attaching a sample project demonstrating the approach.

All the best,
Vesi
the Telerik team

[Kjell]

Thanks for the exemple files :-)
Still one problem...

I have the funktion when i double-click at the image, i want to download the big image in the folder "~/Images/Originals"
In OnClientFileOpen i use insted "explorerFileOpen" with "Handler.ashx"

function OnClientFileOpen(oExplorer, args) {
    var item = args.get_item();
    var fileExtension = item.get_extension();

    if (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "png" || fileExtension == "pdf") {
        // File is a image document, do not open a new window
        args.set_cancel(true);

        // Tell browser to open file directly
        var requestImage = "Handler.ashx?path=" + item.get_url();
        document.location = requestImage;
    }
}

But it downloads the images in "Images/Thumbnails/
How do I change so that I download the big Picture?

[Vessy]

Hi Kjell,

Since the URL of the image is changed in the ResolveDirectory to point the thumbnail files, you must reset it to point the original file whenever when the file is opened / downloaded. The path to the original images is kept in the file's path, so you have to include the code I provided in my previous post:

function OnClientFileOpen(oExplorer, args) {

    args.get_item().set_url(args.get_item().get_path()); //reset the URL to the original images


    var item = args.get_item();

    var fileExtension = item.get_extension();

 

    if (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "png" || fileExtension == "pdf") {

        // File is a image document, do not open a new window

        args.set_cancel(true);

 

        // Tell browser to open file directly

        var requestImage = "Handler.ashx?path=" + item.get_url();

        document.location = requestImage;

    }

}

Kind regards,
Vesi
the Telerik team