Adding file description to Properties dialog 2.1

Sometimes you need to describe files, for example if you are integrating elFinder with an enterprise document management system. This howto will show how to extend elFinder to show a file description gotten from external source.

• Add command for getting/setting description to volume driver. In this example using a file named elFinderVolumeMyDriver.class.php.

<?php

class elFinderVolumeMyDriver extends elFinderVolumeLocalFileSystem {
  // ...

  // Command to implement
  public function desc($target, $newdesc = NULL) {
    // get readable path from hash
    $path = $this->decode($target);

    if ($newdesc == NULL) {
      // Get current the description
      $desc = $this->getYourCoolDescription($target);
    } else {
      // Write a new description
      $desc = $this->writeYourCoolDescription($target, $newdesc);
    }

    return $desc;
  }

  // Get a description of the $target
  // @return the description if it exists; -1 otherwise
  protected function getYourCoolDescription($target) {
    // Your implementation here
    // This one just returns 'desc' every time
    return 'desc';
  }

  // Writing a description for the $target
  // @return the description if successful; -1 otherwise
  protected function writeYourCoolDescription($target, $newdesc) {
    // Your implementation here
    // This one just returns the new description
    return $newdesc;
  }

  // ...
}

• Implement getYourCoolDescription($target) and writeYourCoolDescription($target, $newdesc) with real code for getting/setting the description from external source.
• Register the command in the elFinder object. In this example using a file named myelFinder.class.php.

<?php

class myelFinder extends elFinder {
  // Custom error message if description isn't found
  const ERROR_DESC_NOT_FOUND = 'Description not found';

  // ...

  // Modify the constructor
  // Run the old constructor and register 'desc' as a new command
  public function __construct($opts) {
    parent::__construct($opts);
    $this->commands['desc'] = array('target' => TRUE, 'content' => FALSE);
  }

  // Implement the desc command
  protected function desc($args) {
    // Get the target directory and $desc parameter
    $target = $args['target'];
    $desc   = $args['content'];

    // Get the volume, and if successful, the file
    $volume = $this->volume($target);
    $file   = $volume ? $volume->file($target) : false;

    // Check if desc is disabled, and if we can get the true description
    $disabled = $volume ? $volume->commandDisabled('desc') : false;
    $desc     = (!$disabled && $volume) ? $volume->desc($target, $desc) : false;

    // Start accumulating the results
    $results = array();

    if (!$file) {
      // File not found; send "file not found" error message
      $results['error'] = $this->error(self::ERROR_FILE_NOT_FOUND);
    } elseif ($disabled) {
      // Command disabled; send "access denied" messsage, with filename
      $results['error'] = $this->error(self::ERROR_ACCESS_DENIED, $file['name']);
    } elseif ($desc == -1) {
      // No description; send "description not found" message, with filename
      $results['error'] = $this->error(self::ERROR_DESC_NOT_FOUND, $file['name']);
    } else {
      // Success!
      $results['desc'] = $desc; 
    }

    return $results;
  }

  // ...
}

• Include these extended files (elFinder subclass and custom volume driver) in the connector.

<?php
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderConnector.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinder.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeDriver.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeLocalFileSystem.class.php';
// don't forget our new included files
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elFinderVolumeMyDriver.class.php';
include_once dirname(__FILE__).DIRECTORY_SEPARATOR.'elmyFinder.class.php';

$opts = array( 
 'roots' => array(
    array(
      'driver' => 'MyDriver',  // use my custom volume driver
      'path' => '/tmp/myfiles',
      'URL' => 'http://example.com/my-files/',
    ),
 ),
);

$connector = new elFinderConnector(new elmyFinder($opts), true);  // instantiate using our custom elFinder object
$connector->run();

• Finally, initialize the client using the following (where we will configure how the description will be displayed):

<script type="text/javascript" src="js/elfinder.min.js"></script>
<script>
$(function() {

  // assuming that you have a div with id 'elfinder'
  $('#elfinder').elfinder({
    // Replace with the path to your connector
    url: 'php/connector.minimal.php',
    
    // Here is where you will add your extra info
    commandsOptions : {
      info: {
        custom : {
          // Key is the same as your command name
      	  desc : {
            // Field label
            label : 'Description',
          
            // HTML Template
            tpl : '<div class="elfinder-info-desc"><span class="elfinder-info-spinner"></span></div>',
          
            // Action that sends the request to the server and get the description
            action : function(file, filemanager, dialog) {
              // Use the @filemanager object to issue a request
              filemanager.request({
                // Issuing the custom 'desc' command, targetting the selected file
                data : { cmd: 'desc', target: file.hash, },
                preventDefault: true,
              })
              // If the request fails, populate the field with 'Unknown'
              .fail(function() {
                dialog.find('.elfinder-info-desc').html(filemanager.i18n('unknown'));
              })
              // When the request is successful, show the description
              .done(function(data) {
                dialog.find('.elfinder-info-desc').html(data.desc);
              });
            },
          },
        },
      }
    }
  });

});
</script>