This project is read-only.

Thumbnail genaration

Explanation of thumbnails generation (full sample
1) Add new routing path. Example:
routes.MapRoute(null, "Thumbnails/{tmb}", new { controller = "Files", action = "Thumbs", tmb = UrlParameter.Optional });

2) Add action to your controller with following code:
 public ActionResult Thumbs(string tmb)
     return Connector.GetThumbnail(Request, Response, tmb);

3) Set property ThumbnailsUrl in your roots:
ThumbnailsUrl = "Thumbnails/"

4) Set directrory for store thumbnails. Thumbnails can be stored separately from original directory.
ThumbnailsStorage = new DirectoryInfo(Server.MapPath("~/Files"));

If your not set this property, than thumbnails will be generated "on fly" for every client's request and stored in client browser cache. Be carefull with this option because it can affect pefromance.

Last edited Jun 16, 2013 at 5:43 PM by EvgenyNoskov, version 3


EvgenyNoskov Jul 18, 2013 at 5:50 AM 
In FilesController added property named 'Connector' which has type Elfinder.Connector.
In peace of code:
public ActionResult Thumbs(string tmb)
return Connector.GetThumbnail(Request, Response, tmb);
called property 'Connector', which initialize new instance of class Elfinder.Connector, add roots to connector, and return this instance of class. This is not 'global' variable, you can initialize your connector object in any place.

EricPincus Jun 24, 2013 at 1:33 PM 
was able to get thumbnails working with a dynamic file location.

The folder is stored in custom data - so this worked by editing the js:

attachThumbnails = function (images) {
//added here:
var folder = "";
$.each(fm.options.customData, function (key, val) {
folder = val;
return false;
var url = fm.option('tmbUrl'),
ret = true,
$.each(images, function (hash, tmb) {
var node = cwd.find('#'+hash);
if (node.length) {
(function(node, tmb) {
.load(function() { node.find('.elfinder-cwd-icon').css('background', "url('"+tmb+"') center center no-repeat"); })
.attr('src', tmb);
})(node, url + "?tmb=" + tmb + "&folder=" + folder);//CHANGE HERE TOO - url can be simplified in routes section
} else {
ret = false;
if ((ndx = index(hash)) != -1) {
buffer[ndx].tmb = tmb;
return ret;

EricPincus Jun 23, 2013 at 8:41 PM 
Looking here:

I see that the connector can be added to the controller constructor - which in theory would work - since connector is then stored in a global variable.

The issue I'm running into is that the file location is dynamic - the files shown in ElFinder have different roots depending on which record is being called in the DB.

I've got to find a way to pass that on - perhaps as some additional arguments in the call to the controller with the information for where the files are.

Still hacking away at it.

EricPincus Jun 22, 2013 at 2:47 AM 
On this line:

public ActionResult Thumbs(string tmb)
return Connector.GetThumbnail(Request, Response, tmb);

I see Connector as a class not an object - thus it needs instantiation.

What am I missing?