elFinder

https://github.com/studio-42/elfinder
Admin
An open-source file manager for the web written in JavaScript using jQuery UI, featuring a Mac OS X...
Tokens:124,904
Snippets:862
Trust Score:6
License:BSD-3-Clause
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install build tools

Source: https://github.com/studio-42/elfinder/wiki/Build-and-compress-elFinder-from-source

Install the required build dependencies using npm.

```bash
npm install
```

--------------------------------

### Connector Command Request Example

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.0

The client initiates communication by sending a 'cmd' argument via HTTP GET or POST to the connector.

```http
http://localhost/connector.php?cmd=open
```

--------------------------------

### Install jake globally

Source: https://github.com/studio-42/elfinder/wiki/Build-and-compress-elFinder-from-source

Optionally install the jake build tool globally.

```bash
npm install -g jake
```

--------------------------------

### Configure optionsNetVolumes

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example configuration for root options of network mounting volumes, including common options and protocol-specific settings.

```php
'optionsNetVolumes' => array(
    // key '*' is common additional volume root options
    '*'   => array(),
    // key of elFinder::$netDrivers is each protocol volumes
    'ftp' => array()
)
```

--------------------------------

### Bind configuration example

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Demonstrates how to define a callback function and register it within the 'bind' configuration option to hook into various elFinder commands.

```php
<?php

/**
 * Simple callback catcher
 *
 * @param  string   $cmd       command name
 * @param  array    $result    command result
 * @param  array    $args      command arguments from client
 * @param  object   $elfinder  elFinder instance
 * @param  object   $volume    current volume instance
 * @return void|true
 **/
public function mySimpleCallback($cmd, &$result, $args, $elfinder, $volume) {
    // do something here
    // You can modify value $result directly
    $result['_customData'] = 'Custom data';
    // $volume is false if cmd has `targets`(multi targets). You can get each $volume like this.
    if (! $volume && isset($arg['targets']) && is_array($arg['targets'])) {
        foreach($arg['targets'] as $target) {
            $volume = $elfinder->getVolume($target);
        }
    }
    // You can force refresh the elFinder view by returning a value `true`
    return true;
}

$opts = array(
    'bind' => array(
        'mkdir mkfile rename duplicate upload rm paste' => array('mySimpleCallback'),
        'upload.presave' => array(
            'Plugin.AutoResize.onUpLoadPreSave',
            'Plugin.Watermark.onUpLoadPreSave'
        )
    ),
    'roots' => array(...)
);
```

--------------------------------

### Configure multiple roots in connector.php

Source: https://github.com/studio-42/elfinder/wiki/Multiple-Roots

This example demonstrates how to define two separate LocalFileSystem roots within the $opts array in connector.php.

```php
<?php

$opts = array(
    'roots' => array(
        array(
            'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
            'path'          => 'path/to/files/first_root',  // path to files (REQUIRED)
            'URL'           => 'http://localhost/files/first_root/',   // URL to files (REQUIRED)
            'alias'         => 'First home', // The name to replace your actual path name. (OPTIONAL)
            'accessControl' => 'access'      // disable and hide dot starting files (OPTIONAL)
        ),
        array(
            'driver'        => 'LocalFileSystem',
            'path'          => 'path/to/files/second_root',
            'URL'           => 'http://localhost/files/second_root/',
            'alias'         => 'Second home'
        )
    )
);
```

--------------------------------

### Initialize elFinder with connector options

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of initializing the elFinder connector by passing an array of options to the elFinder class constructor and running the connector.

```php
<?php

$opts = array(
    'roots'  => array(
        array(
            'driver' => 'LocalFileSystem',
            'path'   => '/path/to/files/',
            'URL'    => 'http://localhost/to/files/'
        )
    )
);

// run elFinder
$connector = new elFinderConnector(new elFinder($opts));
$connector->run();
```

--------------------------------

### acceptedName validation example

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example showing how to define a validation function for file names and assign it to the acceptedName option.

```php
function validName($name) {
    return strpos($name, '.') !== 0;
}

// later in root options
'acceptedName' => 'validName'
```

--------------------------------

### General connector configuration example

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Defines the 'roots' array containing multiple storage drivers such as LocalFileSystem and MySQL with specific access attributes and path configurations.

```php
<?php

$opts = array(
    'roots'  => array(
        array(
            'driver'     => 'LocalFileSystem',
            'path'       => '/path/to/files/',
            'startPath'  => '/path/to/files/test',
            'URL'        => 'http://localhost/to/files/',
            'alias'      => 'Home',
            'mimeDetect' => 'internal',
            'imgLib'     => 'auto',
            'tmbPath'    => 'thumbnails',
            'tmbCrop'    => false,
            'defaults'   => array('read' => false, 'write' => true),
            'attributes' => array(
                array( // hide readmes
                    'pattern' => '/README/',
                    'read' => false,
                    'write' => false,
                    'hidden' => true,
                    'locked' => false
                ),
                array( // restrict access to png files
                    'pattern' => '/\.png$/',
                    'write' => false,
                    'locked' => true
                )
            ),
        ),
        array( // another root
            'driver' => 'MySQL',
            'host'   => 'localhost',
            'user'   => 'eluser',
            'pass'   => 'elpass',
            'db'     => 'elfinder'
            'path'   => 1,
        )
    )
);
```

--------------------------------

### Implement custom volume driver command

Source: https://github.com/studio-42/elfinder/wiki/Adding-file-description-to-Properties-dialog-2.1

Create a class extending elFinderVolumeLocalFileSystem to handle the 'desc' command for getting and setting file descriptions.

```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;
  }

  // ...
}
```

--------------------------------

### get

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.0

Returns the contents of a plain/text file (preview). Accepts the hash of the directory and the file, and returns the raw text content.

```APIDOC
## get

### Description
Returns the context of a plain/text file (preview).

### Arguments
- **cmd** (string) - Required - The command name, must be 'read'.
- **current** (string) - Required - Hash of the directory where the file is stored.
- **target** (string) - Required - Hash of the file.

### Response
- **content** (String) - Text file contents (raw string).

### Response Example
{
    "content": "Hello world!" // (String) contents of the text file
}
```

--------------------------------

### get

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.0

Outputs plain/text file contents for preview.

```APIDOC
## get

### Description
Outputs plain/text file contents (preview).

### Method
GET

### Endpoint
connector.php

### Parameters
#### Query Parameters
- **cmd** (string) - Required - The command name, set to 'get'.
```

--------------------------------

### Example theme manifest JSON

Source: https://github.com/studio-42/elfinder/wiki/How-to-load-CSS-with-RequireJS

A sample JSON structure for a theme manifest file defining metadata and CSS URLs.

```json
{
    "name": "Theme name",
    "cssurls": "https://theme-site.com/theme.min.css",
    "author": "Your name",
    "email": "optional@email.com",
    "license": "MIT",
    "link": "https://theme-site.com/",
    "image": "https://theme-site.com/theme-preview.png",
    "description": ""
}
```

--------------------------------

### additionalMimeMap configuration example

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of defining an additional MIME type normalization map using an associative array where keys are formatted as '[ext]:[Detected MIME Type]' and values are the '[Normalized MIME Type]'.

```php
array(
    'tpl:application/vnd.groove-tool-template' => 'text/plain' // '[ext]:[Detected MIME Type]' => '[Normalized MIME Type]'
)
```

--------------------------------

### Get jake information

Source: https://github.com/studio-42/elfinder/wiki/Build-and-compress-elFinder-from-source

Display help and available tasks for the jake build tool.

```bash
jake
jake --tasks
```

--------------------------------

### Configure plugin options

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of the plugin configuration structure within the elFinder options array. When omitted, the plugin's default values are applied.

```php
$opts = array(
    'plugin' => array(
        'Plugin Name' = array(
            'Option Name' => Option Value,
        ),
    ),
    'roots' => array(...)
);
```

--------------------------------

### Configure roots array

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of defining multiple root volumes, including a Group driver for organizing local volumes and specific configurations for LocalFileSystem, MySQL, and FTP drivers.

```php
<?php

$opts = array(
    'roots'  => array(
        array(
            // Group for local volume (elFinder >= 2.1.15)
            'alias'        => 'LocalVolumes',
            'driver'       => 'Group',
            'id'           => 'l',
            'rootCssClass' => 'elfinder-navbar-root-local'
        ),
        array(
            'phash'  => 'gl_Lw', // set parent to 'LocalVolumes'
            'driver' => 'LocalFileSystem',
            'path'   => '/path/to/files/',
            'URL'    => 'http://localhost/to/files/'
        ),
        array(
            'phash'  => 'gl_Lw', // set parent to 'LocalVolumes'
            'driver' => 'LocalFileSystem',
            'path'   => '/path/to/files2/',
            'URL'    => 'http://localhost/to/files2/'
        ),
        array(
            'driver' => 'MySQL',
            'host'   => 'localhost',
            'user'   => 'eluser',
            'pass'   => 'elpass',
            'db'     => 'elfinder'
            'path'   => 1,
        ),
        array(
            'driver' => 'FTP',
            'host'   => '192.168.1.1',
            'user'   => 'eluser',
            'pass'   => 'elpass',
            'path'   => '/'
        )
    )
);
```

--------------------------------

### Implement logging using a class instance callback

Source: https://github.com/studio-42/elfinder/wiki/Logging

This example uses a class 'elFinderSimpleLogger' to encapsulate logging logic. An instance of this class is passed to the 'bind' option as an array containing the object and the method name.

```php
<?php

/**
 * Simple logger function.
 * Demonstrate how to work with elFinder event api.
 *
 * @package elFinder
 * @author Dmitry (dio) Levashov
 **/
class elFinderSimpleLogger {
    
    /**
     * Log file path
     *
     * @var string
     **/
    protected $file = '';
    
    /**
     * constructor
     *
     * @return void
     * @author Dmitry (dio) Levashov
     **/
    public function __construct($path) {
        $this->file = $path;
        $dir = dirname($path);
        if (!is_dir($dir)) {
            mkdir($dir);
        }
    }
    
    /**
     * Create log record
     *
     * @param  string   $cmd       command name
     * @param  array    $result    command result
     * @param  array    $args      command arguments from client
     * @param  elFinder $elfinder  elFinder instance
     * @param  volume   $volume    elFinder current volume instance
     * @return void|true
     * @author Dmitry (dio) Levashov
     **/
    public function log($cmd, $result, $args, $elfinder, $volume) {
        $log = $cmd.' ['.date('d.m H:s')."]\n";
        
        if (!empty($result['error'])) {
            $log .= "\tERROR: ".implode(' ', $result['error'])."\n";
        }
        
        if (!empty($result['warning'])) {
            $log .= "\tWARNING: ".implode(' ', $result['warning'])."\n";
        }
        
        if (!empty($result['removed'])) {
            foreach ($result['removed'] as $file) {
                // removed file contain additional field "realpath"
                $log .= "\tREMOVED: ".$file['realpath']."\n";
            }
        }
        
        if (!empty($result['added'])) {
            foreach ($result['added'] as $file) {
                $log .= "\tADDED: ".$elfinder->realpath($file['hash'])."\n";
            }
        }
        
        if (!empty($result['changed'])) {
            foreach ($result['changed'] as $file) {
                $log .= "\tCHANGED: ".$elfinder->realpath($file['hash'])."\n";
            }
        }
        
        $this->write($log);
    }
    
    /**
     * Write log into file
     *
     * @param  string  $log  log record
     * @return void
     * @author Dmitry (dio) Levashov
     **/
    protected function write($log) {
        if (($fp = @fopen($this->file, 'a'))) {
            fwrite($fp, $log."\n");
            fclose($fp);
        }
    }
}

$myLogger = new elFinderSimpleLogger('files/temp/log.txt');

$opts = array(
    'bind' => array(
        'mkdir mkfile rename duplicate upload rm paste' => array($myLogger, 'log'),
    ),
    'roots' => array(...)
);
```

--------------------------------

### Define net drive with phash

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of a network drive definition using the phash value to set its parent group.

```php
$roots[] = [
	// set parent to 'Net Drives'
	'phash'		=> 'g2_Lw',
	'driver'		=> 'Dropbox2',
	// same as app_key
	'consumerKey'		=> 'j18xxxxxxx',
	// same as app_secret
	'consumerSecret'	=> 'g5xxxxxxxx',
	// optional (if created) - use this to establish a permanent connection
	'access_token'		=> 'hT_wOxxxxxxxxxxxx',
	'path'			=> '/'
];
```

--------------------------------

### Implement logging using a function callback

Source: https://github.com/studio-42/elfinder/wiki/Logging

This example defines a 'logger' function that captures command results and writes them to a log file. The function is then registered in the elFinder options array under the 'bind' key for specific file operations.

```php
<?php

/**
 * Smart logger function
 * Demonstrate how to work with elFinder event api
 *
 * @param  string   $cmd       command name
 * @param  array    $result    command result
 * @param  array    $args      command arguments from client
 * @param  elFinder $elfinder  elFinder instance
 * @param  volume   $volume    elFinder current volume instance
 * @return void|true
 * @author Troex Nevelin
 **/
function logger($cmd, $result, $args, $elfinder, $volume) {
    $log = sprintf('[%s] %s:', date('r'), strtoupper($cmd));
    foreach ($result as $key => $value) {
        if (empty($value)) {
            continue;
        }
        $data = array();
        if (in_array($key, array('error', 'warning'))) {
            array_push($data, implode(' ', $value));
        } else {
            if (is_array($value)) { // changes made to files
                foreach ($value as $file) {
                    $filepath = (isset($file['realpath']) ? $file['realpath'] : $elfinder->realpath($file['hash']));
                    array_push($data, $filepath);
                }
            } else { // other value (ex. header)
                array_push($data, $value);
            }
        }
        $log .= sprintf(' %s(%s)', $key, implode(', ', $data));
    }
    $log .= "\n";

    $logfile = '../files/temp/log.txt';
    $dir = dirname($logfile);
    if (!is_dir($dir) && !mkdir($dir)) {
        return;
    }
    if (($fp = fopen($logfile, 'a'))) {
        fwrite($fp, $log);
        fclose($fp);
    }
}

$opts = array(
    'bind' => array(
        'mkdir mkfile rename duplicate upload rm paste' => 'logger'
    ),
    'roots' => array(...)
);
```

--------------------------------

### CKEditor 5 and elFinder implementation setup

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-CKEditor-5

A basic HTML structure for integrating CKEditor 5 with elFinder, including necessary script and stylesheet dependencies.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
    <!-- jQuery and jQuery-UI -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/>
    <!-- elFinder -->
    <script src="js/elfinder.min.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor">
        &lt;p&gt;This is some sample content.&lt;/p&gt;
    </textarea>
    <script>
        // elfinder folder hash of the destination folder to be uploaded in this CKeditor 5
        const uploadTargetHash = 'l1_Lw';

        // elFinder connector URL
        const connectorUrl = 'php/connector.minimal.php';
```

--------------------------------

### CKEditor 4 and elFinder integration logic in main.ckedialog.js

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-CKEditor-4-(jQuery-UI-dialog-mode)

This snippet handles the CKEditor instance setup, including image upload procedures and the initialization of the editor with specific plugins.

```javascript
// CKEditor instance
var cke = e.editor;

// Setup the procedure when DnD image upload was completed
cke.widgets.registered.uploadimage.onUploaded = function(upload){
    var self = this;
    setShowImgSize(upload.url, function(size) {
        self.replaceWith('<img src="'+encodeURI(upload.url)+'" width="'+size.width+'" height="'+size.height+'"></img>');
    });
}

// Setup the procedure when send DnD image upload data to elFinder's connector
cke.on('fileUploadRequest', function(e){
    var target = elfDirHashMap['image']? elfDirHashMap['image'] : elfDirHashMap['fb'],
        fileLoader = e.data.fileLoader,
        xhr = fileLoader.xhr,
        formData = new FormData();
    e.stop();
    xhr.open('POST', fileLoader.uploadUrl, true);
    formData.append('cmd', 'upload');
    formData.append('target', target);
    formData.append('upload[]', fileLoader.file, fileLoader.fileName);
    xhr.send(formData);
}, null, null, 4);

// Setup the procedure when got DnD image upload response
cke.on('fileUploadResponse', function(e){
    var file;
    e.stop();
    var data = e.data,
        res = JSON.parse(data.fileLoader.xhr.responseText);
    if (!res.added || res.added.length < 1) {
        data.message = 'Can not upload.';
        e.cancel();
    } else {
        elfInstance.exec('reload');
        file = res.added[0];
        if (file.url && file.url != '1') {
            data.url = file.url;
            try {
                data.url = decodeURIComponent(data.url);
            } catch(e) {}
        } else {
            data.url = elfInstance.options.url + ((elfInstance.options.url.indexOf('?') === -1)? '?' : '&') + 'cmd=file&target=' + file.hash;
        }
        data.url = elfInstance.convAbsUrl(data.url);
    }
});
});

// setup CKEditor
CKEDITOR.replace('mytextarea', {
    filebrowserBrowseUrl: '#',
    extraPlugins: 'uploadimage,image2',
    filebrowserUploadUrl: './php/connector.minimal.php',
    imageUploadUrl: './php/connector.minimal.php'
});

// Remove "Now loading..."
$('#loading').remove();
// Show textarea
$('#mytextarea').show();
});
```

--------------------------------

### CKEditor and elFinder Integration Setup

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-CKEditor-(jQuery-UI-dialog-mode)-Varian-2-(change-url)

A complete HTML structure including jQuery, jQuery UI, elFinder, and CKEditor dependencies, along with the JavaScript logic to map dialog types to specific connector URLs.

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<!-- jQuery and jQuery UI (REQUIRED) -->
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<!-- elFinder JS (REQUIRED) -->
	<script src="./js/elfinder.min.js"></script>

	<!-- CKEditor JS (REQUIRED) -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.2/ckeditor.js"></script>

	<script type="text/javascript">
		
(function(){
		var elfNode, elfInstance, dialogName,
      elfUrlMap = { // Your variants connector's URL
        image : './php/connector.image.php',
        flash : './php/connector.flash.php',
        files : './php/connector.files.php',
        link  : './php/connector.files.php',
        fb    : './php/connector.files.php',
      },
			elfDirHashMap = { // Dialog name / elFinder holder hash Map
				image : '',
				flash : '',
				files : '',
				link  : ''
			};
      
      			var getLang = function() {
				try {
					var full_lng;
					var loct = window.location.search;
					var locm;
					if (loct && (locm = loct.match(/lang=([a-zA-Z_-]+)/))) {
						full_lng = locm[1];
					} else {
						full_lng = (navigator.browserLanguage || navigator.language || navigator.userLanguage);
					}
					var lng = full_lng.substr(0,2);
					if (lng == 'ja') lng = 'jp';
					else if (lng == 'pt') lng = 'pt_BR';
					else if (lng == 'zh') lng = (full_lng.substr(0,5) == 'zh-TW')? 'zh_TW' : 'zh_CN';

					if (lng != 'en') {
						var script_tag		= document.createElement("script");
						script_tag.type		= "text/javascript";
						script_tag.src		= "./js/i18n/elfinder."+lng+".js";
						script_tag.charset = "utf-8";
						$("head").append(script_tag);
					}

					return lng;
				} catch(e) {
					return 'en';
				}
			};

		CKEDITOR.on('dialogDefinition', function (event) { // connection manager
			var editor = event.editor;
			var dialogDefinition = event.data.definition;
			var tabCount = dialogDefinition.contents.length;
			for (var i = 0; i < tabCount; i++) { // cycle to replace the click of button "View on the server"
				var browseButton = dialogDefinition.contents[i].get('browse');

				if (browseButton !== null) {
					browseButton.hidden = false;
					browseButton.onClick = function (dialog, i) {

						dialogName = CKEDITOR.dialog.getCurrent()._.name;
```

--------------------------------

### Initialize elFinder client with info.js

Source: https://github.com/studio-42/elfinder/wiki/Adding-file-description-to-Properties-dialog

Loads elfinder.min.js and info.js, then initializes the elFinder widget with Drupal settings.

```html
<script type="text/javascript" src="elfinder.min.js"></script>
<script type="text/javascript" src="info.js"></script>
<script type="text/javascript">

$().ready(function() {
  if (Drupal.settings.elfinder) {

    var elfinderOpts = {
      url : Drupal.settings.elfinder.connectorUrl,
      lang : Drupal.settings.elfinder.langCode,
      rememberLastDir : Drupal.settings.elfinder.rememberLastDir,
      closeOnEditorCallback : false
    }
	
    $('#finder').elfinder(elfinderOpts);
  }
});
</script>
```

--------------------------------

### get

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Returns the content of a file as a string (UTF-8).

```APIDOC
## get

### Description
Returns the content as String (As UTF-8).

### Arguments
- **cmd** : get
- **current** : hash of the directory where the file is stored
- **target** : hash of the file
- **conv** : instructions for character encoding conversion of the text file
  - **1** : auto detect encoding (Return `false` as content in response data when failed)
  - **0** : auto detect encoding (Return `{ "doconv" : "unknown" }` as response data when failed)
  - **Original Character encoding** : original character encoding as specified by the user

### Response
- **content** - file contents (UTF-8 String or Data URI Scheme String) or `false`
- **encoding** - (Optional) Detected original character encoding (Require when converting from encoding other than UTF-8)
- **doconv** - (Optional) `"doconv":"unknown"` is returned to ask the user for the original encoding if automatic conversion to UTF-8 is not possible when requested with `conv = 0`.

For files other than text files, `content` must be returned as string data of Data URI Scheme.

### Response Example
```javascript
{
    "content": "Hello world!" // contents of the file 
}
```
```

--------------------------------

### open

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.0

Opens a directory and initializes data when no directory is defined (first iteration).

```APIDOC
## open

### Description
Opens a directory and initializes data when no directory is defined (first iteration).

### Method
GET

### Endpoint
connector.php

### Parameters
#### Query Parameters
- **cmd** (string) - Required - The command name, set to 'open'.
- **init** (integer) - Required - Initialization flag, set to 1.

### Request Example
http://localhost/connector.php?cmd=open&init=1
```

--------------------------------

### Summernote Toolbar Configuration

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-Multiple-Summernote-(fixed-functions)

Example configuration for the Summernote toolbar to include the elfinder button.

```javascript
['insert', ['link', 'image','elfinder','hr']]
```

--------------------------------

### Define network drives group

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of defining a group for network drives in the $roots array.

```php
$roots[] = [
	// Group for local drives
	'alias'	=> 'Net Drives',
	'driver'	=> 'Group',
	'id'	=> '2',
	'rootCssClass'	=> 'elfinder-navbar-root-network'
];
```

--------------------------------

### open command with init parameter

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Initializes the file manager by sending an open command with the init parameter. This is the first request a client makes to load the file manager.

```APIDOC
## [GET] /connector.php?cmd=open&init=1

### Description
Initializes the file manager by sending an open command with the init parameter.

### Method
GET

### Endpoint
/connector.php?cmd=open&init=1

### Parameters
#### Query Parameters
- **cmd** (string) - Required - The command to execute, set to 'open'.
- **init** (integer) - Required - Set to 1 to initialize the file manager.

### Request Example
GET /connector.php?cmd=open&init=1

### Response
#### Success Response (200)
- **files** (array) - List of file objects in the root directory.
- **api** (string) - API version.
- **uplMaxSize** (string) - Maximum upload size.
- **customData** (object) - Custom data.

#### Response Example
{
  "files": [],
  "api": "2.1",
  "uplMaxSize": "16M",
  "customData": {}
}
```

--------------------------------

### Define local drives group

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

Example of defining a group for local drives in the $roots array.

```php
$roots[] = [
	// Group for local drives
	'alias'		=> 'Local Drives',
	'driver'	=> 'Group',
	'id'		=> 'l',
	'rootCssClass'	=> 'elfinder-navbar-root-local'
];
```

--------------------------------

### HTML file before TinyMCE cleanup

Source: https://github.com/studio-42/elfinder/wiki/Using-custom-editor-to-edit-files-within-elfinder

Example HTML file that TinyMCE will strip down to only the content within the body tags.

```html
<html>
<head>
   ...
</head>
<body>
 <h1>Hello World</h1>
</body>
</html>
```

--------------------------------

### startPathHash generation

Source: https://github.com/studio-42/elfinder/wiki/Client-configuration-options-2.1

Demonstrates how to generate a hash for a directory path in JavaScript for use with the startPathHash option.

```javascript
var volumeId = 'l1_'; // volume id
var path = 'path/to/target'; // without root path
//var path = 'path\\to\\target'; // use \ on windows server
var hash = volumeId + btoa(path).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '.').replace(/\.+$/, '');
```

--------------------------------

### Customizing active commands

Source: https://github.com/studio-42/elfinder/wiki/Client-configuration-options

Example of how to filter the list of active commands by removing specific items from the default set.

```javascript
// say you want to disable only a couple of commands
var myCommands = Object.keys(elFinder.prototype.commands);
var disabled = ['extract', 'archive'];
$.each(disabled, function(i, cmd) {
	(idx = $.inArray(cmd, myCommands)) !== -1 && myCommands.splice(idx,1);
});

var options = {
	url : 'php/connector.php',
	commands : myCommands
}
```

--------------------------------

### open

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Returns information about requested directory and its content, optionally can return directory tree as files, and options for the current volume.

```APIDOC
## open

### Description
Returns information about requested directory and its content, optionally can return directory tree as **files**, and **options** for the current volume.

### Arguments
- **init** : (true|false|not set), optional parameter. If **true** indicates that this request is an initialization request and its response must include the value **api** (number or string >= 2) and should include the **options** object, but will still work without it. Also, this option affects the processing of parameter **target** hash value. If **init == true** and **target** is not set or that directory doesn't exist, then the data connector must return the root directory of the default volume. Otherwise it must return error "File not found".
- **target** : (string) Hash of directory to open. Required if **init == false** or **init** is not set
- **tree** : (true|false), optional. If true, response must contain the top-level object of other volumes.

### Response
- **api** : (Float) The version number of the protocol, must be >= 2.1, ATTENTION - return api ONLY for init request!
```

--------------------------------

### open

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

The 'open' command returns the current working directory information, the list of files and directories, and optional volume options. It is used to initialize or refresh the file manager view.

```APIDOC
## open

### Description
The 'open' command returns the current working directory (cwd) information, the list of files and directories in that directory, and optional volume options. It is used to initialize or refresh the file manager view.

### Response

#### Success Response
- **cwd** (Object) - Information about the current directory. See [[Information about File/Directory]].
- **files** (Array) - Array of objects representing files and directories in the current directory. If parameter **tree == true**, then root folder objects of other volumes are added. The order of files is not important. See [[Information about File/Directory]].
- **netDrivers** (Array) - Network protocols list which can be mounted on the fly (using netmount command). Currently only ftp supported.

#### Optional Fields
- **uplMaxFile** (Number) - Allowed upload max number of files per request. For example 20.
- **uplMaxSize** (String) - Allowed upload max size per request. For example "32M".
- **options** (Object) - Further information about the folder and its volume.

#### options Object Fields
- **path** (String) - Current folder path.
- **url** (String) - Current folder URL.
- **tmbURL** (String) - Thumbnails folder URL.
- **separator** (String) - Path separator for the current volume.
- **disabled** (Array) - List of commands not allowed (disabled) on this volume.
- **copyOverwrite** (Number) - Whether or not to overwrite files with the same name on the current volume when copy.
- **uploadOverwrite** (Number) - Whether or not to overwrite files with the same name on the current volume when upload.
- **uploadMaxSize** (Number) - Upload max file size per file.
- **uploadMaxConn** (Number) - Maximum number of chunked upload connections. `-1` to disable chunked upload.
- **uploadMime** (Object) - MIME type checker for upload.
  - **allow** (Array) - Allowed MIME types.
  - **deny** (Array) - Denied MIME types.
  - **firstOrder** (String) - First order to check ("deny" or "allow").
- **dispInlineRegex** (String) - Regular expression of MIME types that can be displayed inline with the `file` command.
- **jpgQuality** (Number) - JPEG quality for image resize / crop / rotate (1-100).
- **syncChkAsTs** (Number) - Whether or not the current volume can detect update by the time stamp of the directory.
- **syncMinMs** (Number) - Minimum interval milliseconds for auto sync.
- **uiCmdMap** (Object) - Command conversion map for the current volume (e.g. chmod(ui) to perm(connector)).
- **i18nFolderName** (Number) - Is enabled i18n folder name that converts name to elFinderInstance.messages['folder_'+name].
- **archivers** (Object) - Archive settings.
  - **create** (Array) - List of MIME types of archives which can be created.
  - **extract** (Array) - List of MIME types that can be extracted / unpacked.
  - **createext** (Object) - Map list of { MimeType: FileExtension }.

#### debug (Object) - Debug information, if you specify the corresponding connector option.

### Response Example
```javascript
{
  "cwd": { /* Information about current directory */ },
  "files": [ /* Array of file/directory objects */ ],
  "netDrivers": ["ftp"],
  "uplMaxFile": 20,
  "uplMaxSize": "32M",
  "options": {
    "path": "files/folder42",
    "url": "http://localhost/elfinder/files/",
    "tmbURL": "http://localhost/elfinder/files/.tmb/",
    "separator": "/",
    "disabled": [],
    "copyOverwrite": 1,
    "uploadOverwrite": 1,
    "uploadMaxSize": 1073741824,
    "uploadMaxConn": 3,
    "uploadMime": {
      "allow": ["image", "text/plain"],
      "deny": ["all"],
      "firstOrder": "deny"
    },
    "dispInlineRegex": "^(?:image|text/plain$)",
    "jpgQuality": 100,
    "syncChkAsTs": 1,
    "syncMinMs": 30000,
    "uiCmdMap": { "chmod": "perm" },
    "i18nFolderName": 1,
    "archivers": {
      "create": ["application/zip", "application/x-tar", "application/x-gzip"],
      "extract": ["application/zip", "application/x-tar", "application/x-gzip"],
      "createext": {
        "application/zip": "zip",
        "application/x-tar": "tar",
        "application/x-gzip": "tgz"
      }
    }
  },
  "debug": {}
}
```
```

--------------------------------

### accessControl callback function

Source: https://github.com/studio-42/elfinder/wiki/Connector-configuration-options-2.1

A simple function demonstrating how to control file access by disabling access to files or folders starting with a dot.

```php
/**
 * Simple function to demonstrate how to control file access using "accessControl" callback.
 * This method will disable accessing files/folders starting from '.' (dot)
 *
 * @param  string    $attr    attribute name (read|write|locked|hidden)
 * @param  string    $path    absolute file path
 * @param  string    $data    value of volume option `accessControlData`
 * @param  object    $volume  elFinder volume driver object
 * @param  bool|null $isDir   path is directory (true: directory, false: file, null: unknown)
 * @param  string    $relpath file path relative to volume root directory started with directory separator
 * @return bool|null
 **/
function access($attr, $path, $data, $volume, $isDir, $relpath) {
	$basename = basename($path);
	return $basename[0] === '.'                  // if file/folder begins with '.' (dot)
			 && strlen($relpath) !== 1           // but with out volume root
		? !($attr == 'read' || $attr == 'write') // set read+write to false, other (locked+hidden) set to true
		:  null;                                 // else elFinder decide it itself
}
```

--------------------------------

### mkdir

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Create a new directory.

```APIDOC
## mkdir

### Description
Create a new directory.

### Arguments
- **cmd** : mkdir
- **target** : hash of target directory
- **name** : New directory name
- **dirs[]** : array of new directories path (requests at pre-flight of folder upload)

### Response
- **added** : (Array) Array with a single object - a new directory.
- **hashes** : (Object) Object of path in the *dirs[]* as a key to the corresponding hash value.
```

--------------------------------

### Paste Command Response

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Example of a successful paste operation response, containing the added file objects and the list of removed file hashes.

```javascript
{
    "added": [{
        "mime": "text\/plain",
        "ts": 1380910690,
        "read": 1,
        "write": 1,
        "size": 51,
        "hash": "l2_dW50aXRsZWQgZm9sZGVyL1JlYWQgVGhpcyBjb3B5IDEudHh0",
        "name": "Read This copy 1.txt",
        "phash": "l2_dW50aXRsZWQgZm9sZGVy"
    }],
    "removed": ["l2_UmVhZCBUaGlzIGNvcHkgMS50eHQ"]
}
```

--------------------------------

### Initialize elFinder with options

Source: https://github.com/studio-42/elfinder/wiki/Client-configuration-options

Demonstrates how to pass a configuration object to the $.elfinder() method to set the connector URL and interface language.

```javascript
var options = {
	url  : 'php/connector.php',
	lang : 'en'
}
$('#elfinder').elfinder(options);
```

--------------------------------

### mkfile

Source: https://github.com/studio-42/elfinder/wiki/Client-Server-API-2.1

Create a new blank file.

```APIDOC
## mkfile

### Description
Create a new blank file.

### Arguments
- **cmd** : mkfile
- **target** : hash of target directory
- **name** : New file name

### Response
- **added** : (Array) Array with a single object - a new file.
```

--------------------------------

### Create elfinder.php View

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-CodeIgniter

Create a view file in /application/views to initialize the elFinder client interface.

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>elFinder 2.1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />

        <!-- Require JS (REQUIRED) -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
        <script>
            define('elFinderConfig', {
                // elFinder options (REQUIRED)
                // Documentation for client options:
                // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
                defaultOpts : {
                    url : '<?php echo $connector ?>' // connector URL (REQUIRED)
                    ,commandsOptions : {
                        edit : {
                            extraOptions : {
                                // set API key to enable Creative Cloud image editor
                                // see https://console.adobe.io/
                                creativeCloudApiKey : '',
                                // browsing manager URL for CKEditor, TinyMCE
                                // uses self location with the empty value
                                managerUrl : ''
                            }
                        }
                        ,quicklook : {
                            // to enable preview with Google Docs Viewer
                            googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
                        }
                    }
                    // bootCalback calls at before elFinder boot up 
                    ,bootCallback : function(fm, extraObj) {
                        /* any bind functions etc. */
                        fm.bind('init', function() {
                            // any your code
                        });
                        // for example set document.title dynamically.
                        var title = document.title;
                        fm.bind('open', function() {
                            var path = '',
```

--------------------------------

### CKEditor 4 dialogDefinition setup

Source: https://github.com/studio-42/elfinder/wiki/Integration-with-CKEditor-4-(jQuery-UI-dialog-mode)

Configures the upload tab within the CKEditor dialog by iterating through dialog contents to locate browse and upload buttons.

```javascript
                // Setup upload tab in CKEditor dialog
                CKEDITOR.on('dialogDefinition', function (event) {
                    var editor = event.editor,
                        dialogDefinition = event.data.definition,
                        tabCount = dialogDefinition.contents.length,
                        browseButton, uploadButton, submitButton, inputId;
                    
                    for (var i = 0; i < tabCount; i++) {
                        try {
                            browseButton = dialogDefinition.contents[i].get('browse');
                            uploadButton = dialogDefinition.contents[i].get('upload');
                            submitButton = dialogDefinition.contents[i].get('uploadButton');
                        } catch(e) {
                            browseButton = uploadButton = null;
                        }
```

--------------------------------

### Disable URL option in connector.php

Source: https://github.com/studio-42/elfinder/wiki/Disable-real-file-path-from-being-shown

This example shows how to comment out the 'URL' key within the 'roots' array of the elFinder configuration to mask real file paths.

```php
<?php
$opts = array(
	'roots' => array(
		array(
			'driver'        => 'LocalFileSystem',   // driver for accessing file system (REQUIRED)
			'path'          => '../files/',         // path to files (REQUIRED)
			// DISABLE 'URL' BY COMMENTING THE FOLLOWING LINE OUT
			// 'URL'        => dirname($_SERVER['PHP_SELF']) . '/../files/', // URL to files (REQUIRED)
		)
	)
);
```

--------------------------------

### Load themes from manifests

Source: https://github.com/studio-42/elfinder/wiki/How-to-load-CSS-with-RequireJS

Configure themes using the themes object and specify the active theme via the theme property.

```javascript
opts = {
    themes : { // List of themes
        'theme_name' : 'https://example.com/theme_name.json',
    },
    theme : 'theme_name', // default theme, name must be the same as in `themes` list
}
```

--------------------------------

### Load RequireJS with default configuration

Source: https://github.com/studio-42/elfinder/wiki/Install

The default script tag for loading RequireJS and the main.default.js file.

```html
<script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
```
Tokens:
Raw