Using elfinder 2 with Codeigniter shouldn’t be a problem. I wouldn’t recommend elFinder 2 beta for production sites yet. But this small guide I think will apply for future 2.X versions too.

Steps

1. Download elFinder 2.X from elfinder.org.
2. Place the css and js files according to the installation instructions of the official documentation.
3. Copy the php directory from the archive you downloaded in step 1, to your application’s libraries directory. 
4. Rename this folder from php to elfinder.
5. Create a new file in the libraries directory with the name Elfinder_lib.php. I added _lib in order to avoid conflict with elfinder’s classes. 

6. Treat Elfinder_lib.php as an ordinary CI library and add the following code inside:

   <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
   
   include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elfinder/elFinderConnector.class.php';
   include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elfinder/elFinder.class.php';
   include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elfinder/elFinderVolumeDriver.class.php';
   include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elfinder/elFinderVolumeLocalFileSystem.class.php';
   
   class Elfinder_lib 
   {
    public function __construct($opts) 
    {
     $connector = new elFinderConnector(new elFinder($opts));
     $connector->run();
    }
   }
   

7. Now you need to create a controller method in order to call it from your javascript. This will be a method of your choice. I will name the controller ex_cont and the method elfinder_init() for this example. 

8. Inside this method you will add part of the connectors code, and it will look like this:

   function elfinder_init()
   {
    $this->load->helper('path');
    $opts = array(
     // 'debug' => true, 
     'roots' => array(
      array( 
       'driver' => 'LocalFileSystem', 
       'path' => set_realpath('yourfilespath'), 
       'URL' => site_url('yourfilespath').'/', 
       'accessControl' => 'access',
      ) 
     ));
     $this->load->library('elfinder_lib', $opts);
    }
   
   

9. Replace “yourfilespath” with the name of your files folder.
10. The last step is to initialize the elFinder through javascript and add the html element. Follow the original documentation again under the Initialize file manager section. The only thing you should notice is the url option which should be something like http://yoursite/ex_cont/elfinder_init

That was it. Nothing crazy. 

elFinder is an amazing browser. I am sure the the stable version will rock. By passing variables to you elfinder_init method you can achieve some great stuff like open the browser to a post’s folder or to a user’s place. Or adding multiple roots dynamically etc. 

If I missed anything just post it below.