Web.config configuration

1. Define the handler:

<!-- IIS6 and development server style -->
<system.web>
    <httpHandlers>
        <add verb="*" path="elfinder.connector" type="elFinder.Connector.Connector, elFinder.Connector"/>
    </httpHandlers>
</system.web>

<!-- IIS7+ style -->
<system.webServer>
    <handlers>
        <add name="elfinder" path="elfinder.connector" type="elFinder.Connector.Connector, elFinder.Connector" verb="*" />
    </handlers>
</system.webServer>

We will access the connector using /elfinder.connector url.

2. Add connector's section:

<configSections>
    <section name="elFinder" type="elFinder.Connector.Config.AppConnectorConfig, elFinder.Connector" requirePermission="false" />
</configSections>

<elFinder apiVersion="2.0"
    localFSRootDirectoryPath="c:\users"
    localFSThumbsDirectoryPath="c:\users\.thumbs"
    rootDirectoryName="Root"
    uploadMaxSize="20M"
    defaultVolumeName="LocalFileSystem"
    baseUrl="http://localhost:55470/data/"
    baseThumbsUrl="http://localhost:55470/data/.thumbs/"
    duplicateFilePattern="Copy of {0}"
    duplicateDirectoryPattern="Copy of {0}"
    thumbsSize="48,48">
</elFinder>

Config section properties:
  • apiVersion - must be set to "2.0"
  • localFSRootDirectoryPath - root directory path
  • localFSThumbsDirectoryPath - path of where thumbnails will be stored
  • rootDirectoryName - alias for root directory (meaning: what name will be shown to user as root directory)
  • uploadMaxSize - maximum file size that can be uploaded using elFinder's upload mechanism. Note: be sure to also set proper values for maxRequestLength and maxAllowedContentLength: http://forums.iis.net/t/1169846.aspx
  • defaultVolumeName - name of the volume type (IVolume implementation) - right now only one volume type is supported: LocalFileSystem
  • baseUrl - url that points to the root directory. If physical root directory is not in your website directory, you can create symbolic link to root directory using Windows mklink command, eg: go to your website directory and invoke: mklink /D data c:\users - this will create symbolic link named data that points to c:\users. This trick is especially helpful during development stage.
  • baseThumbsUrl - url that points to thumbnails directory
  • duplicateFilePattern - pattern for file name used when duplicating file, one can use "{0}" as file name placeholder
  • duplicateDirectoryPattern - pattern for directory name used when duplicating directory, one can use "{0}" as directory name placeholder
  • thumbsSize - size (width and height in pixels) of generated thumbnails

Global.asax configuration

1. Add usings:

using elFinder.Connector;
// in case you are using Autofac as IoC:
using Autofac;
using elFinder.Connector.Integration.Autofac;

2. In Application_Start add IoC configuration/registration (in here we use Autofac as sample):

// register IoC
var builder = new ContainerBuilder();
// add other registrations...
// add elFinder connector registration
builder.RegisterElFinderConnectorDefault();
// create container
_container = builder.Build();
// need also to set container in elFinder module
_container.SetAsElFinderDependencyResolver();

3. In ASP.NET MVC website in RegisterRoutes add also:

routes.IgnoreRoute( "elfinder.connector" );

Client side configuration

In your ASPX/CSHTML page add placeholder for elFinder:

<div class="fileManager">finder</div>  

and some initialization code:

 <script type="text/javascript" charset="utf-8">
     $(function () {
         $('.fileManager').elfinder({
             url: '@Url.Content("~/elfinder.connector")',
             height: 600
         });
     });
</script>

That's it! Now just go to your webpage and see if it works.
If you have any questions don't hesitate to ask them on the "discussions" page.

Last edited Sep 17, 2013 at 7:08 PM by KZmorzynski, version 8

Comments

HashPe May 10, 2013 at 7:35 PM 
ok, I have changed for me in the AppConnectorConfig to next rows
[ConfigurationProperty( "localFSRootDirectoryPath", IsRequired = true )]
public string LocalFSRootDirectoryPath
{
get { return((string)_config["localFSRootDirectoryPath"])[0] == '~' ? System.Web.HttpContext.Current.Server.MapPath((string)_config["localFSRootDirectoryPath"]) : (string)_config["localFSRootDirectoryPath"]; }
}

[ConfigurationProperty( "localFSThumbsDirectoryPath", IsRequired = true )]
public string LocalFSThumbsDirectoryPath
{
get { return ((string)_config["localFSThumbsDirectoryPath"])[0] == '~' ? System.Web.HttpContext.Current.Server.MapPath((string)_config["localFSThumbsDirectoryPath"]) : (string)_config["localFSThumbsDirectoryPath"]; }
}

HashPe May 10, 2013 at 6:36 PM 
how could I use a relativePath?
like ~\Files

danasgarcia Jan 26, 2013 at 3:00 AM 
*Autofac not Afac

danasgarcia Jan 26, 2013 at 3:00 AM 
Hello KZmorzynski,

I have installed the elfinder asp.net connector and am having some issues. When I load the page that I added the <div class="fileManager">finder</div> & the javascript/jquery it give a box at the bottom that says "unable to connect to backend". I followed your instructions, the only thing I changed was "using elfinder.connector:" to "<% Import Namespace="elFinder.Connector"%> same for "using Afac;". Any suggestions?