### Network Volumes Configuration Example

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

Example of configuring network mounting volumes with common and protocol-specific root options.

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

```

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

### elFinder API Options Example

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

This snippet shows an example of the 'options' object returned by the 'open' command when 'init' is true. It details various settings for the current folder and volume.

```javascript
{
  options : {
    "path"            : "files/folder42",                        // (String) Current folder path
    "url"             : "http://localhost/elfinder/files/",      // (String) Current folder URL
    "tmbURL"          : "http://localhost/elfinder/files/.tmb/", // (String) Thumbnails folder URL
    "separator"       : "/",                                     // (String) Path separator for the current volume
    "disabled"        : [],                                      // (Array)  List of commands not allowed (disabled) on this volume
    "copyOverwrite"   : 1,                                       // (Number) Whether or not to overwrite files with the same name on the current volume when copy
    "uploadOverwrite" : 1,                                       // (Number) Whether or not to overwrite files with the same name on the current volume when upload
    "uploadMaxSize"   : 1073741824,                              // (Number) Upload max file size per file
    "uploadMaxConn"   : 3,                                       // (Number) Maximum number of chunked upload connection. `-1` to disable chunked upload
    "uploadMime": {                                              // (Object) MIME type checker for upload
        "allow": [ "image", "text/plain" ],                      // (Array) Allowed MIME type
        "deny": [ "all" ],                                       // (Array) Denied MIME type
        "firstOrder": "deny"                                     // (String) First order to check ("deny" or "allow")
    },
    "dispInlineRegex" : "^(?:image|text/plain$)",                // (String) Regular expression of MIME types that can be displayed inline with the `file` command
    "jpgQuality"      : 100,                                     // (Number) JPEG quality to image resize / crop / rotate (1-100)
    "syncChkAsTs"     : 1,                                       // (Number) Whether or not to current volume can detect update by the time stamp of the directory
    "syncMinMs"       : 30000,                                   // (Number) Minimum inteval Milliseconds for auto sync
    "uiCmdMap"        : { "chmod" : "perm" },                    // (Object) Command conversion map for the current volume (e.g. chmod(ui) to perm(connector))
    "i18nFolderName"  : 1,                                       // (Number) Is enabled i18n folder name that convert name to elFinderInstance.messages['folder_'+name]
    "archivers"       : {                                        // (Object) Archive settings
      "create"  : [
        "application/zip",
        "application/x-tar",
        "application/x-gzip"
      ],
      "extract" : [
        "application/zip",
        "application/x-tar",
        "application/x-gzip"
      ]
    }
  }
}
```

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

### Install Jake Globally (Optional)

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

Optionally install the 'jake' build tool globally. This is an alternative to executing it directly from the local 'node_modules/.bin' directory.

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

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

### Configuring a Dropbox Drive

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

Example configuration for a Dropbox driver, including authentication credentials and path settings. Requires 'copyJoin' to be true for trash functionality.

```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'		=> '/'
];

```

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

### Install Build Tools with npm

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

Install the necessary build tools and dependencies for elFinder using npm. This command installs packages into the 'node_modules' directory.

```bash
npm install
```

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

### Generate Start Path Hash

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

This JavaScript code demonstrates how to generate a hash for a default directory path, which is useful for 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(/\.+$/, '');
```

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

### File Manager Initialization Request

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

This example shows the URL format for initializing the file manager. It is used when the client sends an 'open' command with the 'init' parameter set to 1.

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

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

### Basic elFinder Connector Configuration

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

This snippet shows the basic setup for initializing elFinder with a local file system root. It demonstrates how to pass configuration options to the elFinder constructor.

```php
<?php

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

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

```

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

### General elFinder Configuration

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

Example of configuring multiple roots for elFinder, including LocalFileSystem and MySQL drivers with specific attributes and settings.

```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,
        )
    )
);

```

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

### Custom Volume Driver with Description Command

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

Implement the 'desc' command within a custom elFinder volume driver to get or set file descriptions. This example shows placeholder methods for interacting with an external source.

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

  // ...
}

```

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

### CodeMirror 5 Configuration Example

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

This snippet shows a basic configuration structure for integrating CodeMirror 5 within elFinder. It outlines the expected JSON format for editor settings.

```json
{
    "editor": "codemirror",
    "editors": {
        "codemirror": {
            "வுகளில்": {
                "path": "__elfinder_root__/php/elFinderConnector.class.php",
                "url": "__elfinder_root__/php/elFinderConnector.class.php",
                "connector": "__elfinder_root__/php/elFinderConnector.class.php"
            },
            "வுகளில்": {
                "path": "__elfinder_root__/php/elFinderConnector.class.php",
                "url": "__elfinder_root__/php/elFinderConnector.class.php",
                "connector": "__elfinder_root__/php/elFinderConnector.class.php"
            }
        }
    }
}
```

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

### elFinder Client Options Configuration

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

Example of how to define elFinder client-side options, including the connector URL and language.

```javascript
opts = {
	url : 'php/connector.minimal.php', // connector URL (REQUIRED)
	lang: lang                         // auto detected language (optional)
},
```

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

### General elFinder Connector Configuration

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

This example shows how to configure multiple roots for the elFinder connector, including settings for LocalFileSystem and MySQL drivers. It demonstrates various options like path, URL, alias, mime detection, image library, thumbnail settings, default permissions, and attribute-based access control.

```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'     => 'gd',
            '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,
        )
    )
);

```

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

### Access Control Function Example

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

A PHP function to control file access permissions. This example prevents access to files and folders starting with a dot, except for the volume root.

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

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

### get

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

Returns the content of a plain text file, typically used for previews.

```APIDOC
## get

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

### Arguments
* *cmd* : read
* *current* : hash of the directory where the file is stored
* *target* : hash of the file

### Response: 

* *content* - text file contents (raw string)

<pre><code class="javascript">
{
    "content": "Hello world!" // (String) contents of the text file 
}
</code></pre>
```

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

### Get File Content

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

Retrieves the content of a plain text file for preview. Requires the directory hash and the target file hash.

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

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

### List Directory Contents Example

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

Returns a list of item names within a target directory. If an 'intersect' array is provided, only items present in both the directory and the array are returned.

```javascript
{
    "list": {
        "l1_Zm9sZGVy": "folder", 
        "l1_aW1hZ2UuanBn": "image.jpg", 
        "l1_dGV4dC50eHQ": "text.txt"
    }
}
```

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

### Binding Callbacks for User Actions

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

This example demonstrates how to bind custom callback functions to various elFinder user actions. The 'bind' option accepts an array where keys are space-separated actions and values are callback function names or array pairs.

```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
 * @return void|true
 **/ 
public function mySimpleCallback($cmd, $result, $args, $elfinder) {
    // do something here
}

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

```

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

### Configure Event Handlers for elFinder Initialization

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

Defines event listeners to be bound when elFinder is initialized. This example shows how to extract uploaded archive files and log opened event data.

```javascript
handlers : {
		// extract archive files on upload
		upload : function(event, instance) {
			var uploadedFiles = event.data.added;
			var archives = ['application/zip', 'application/x-gzip', 'application/x-tar', 'application/x-bzip2'];
			for (i in uploadedFiles) {
				var file = uploadedFiles[i];
				if (jQuery.inArray(file.mime, archives) >= 0) {
					instance.exec('extract', file.hash);
				}
			}
		},

		open   : function(event) { console.log(event.data); }
	}
```

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

### Example Theme Manifest JSON

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

This JSON structure defines a theme for elFinder, including its name, CSS URLs, author information, license, and a preview image. It is used when loading themes via the `themes` client configuration.

```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": ""
}
```

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

### Get File Content Example

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

Retrieves the content of a file. For text files, content is returned as a UTF-8 string. For non-text files, it's returned as a Data URI Scheme string.

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

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

### Validate New Filename with a Custom Function

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

Define a custom validation function for new filenames. The function should return true if the name is valid. This example ensures filenames do not start with a dot.

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

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

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

### JavaScript Loader for CKEditor and elFinder

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

This function uses RequireJS to load CKEditor, elFinder, and optional language files. It's a crucial part of the setup, ensuring all dependencies are available before the application starts.

```javascript
require(
                [
                    'ckeditor',
                    'elfinder'
                    , (lang !== 'en')? 'elfinder.lang' : null    // load detected language
                    //, 'extras/quicklook.googledocs'              // optional preview for GoogleApps contents on the GoogleDrive volume
                    //, (lang === 'jp')? 'extras/encoding-japanese.min' : null // optional Japanese decoder for archive preview
                ],
                start,
                function(error) {
                    alert(error.message);
                }
            );
```

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

### Configure Plugin Options

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

Shows the structure for configuring default plugin options for all volumes. If this configuration is omitted, the default values defined by each plugin will be used.

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

```

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

### Configure Commands Options

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

Set options for commands like getFileCallback, upload, quicklook, edit, and help.

```javascript
commandsOptions : {
	// configure value for "getFileCallback" used for editor integration
	getfile : {
		// send only URL or URL+path if false
		onlyURL  : false,

		// allow to return multiple files info
		multiple : false,

		// allow to return folders info
		folders  : false,

		// action after callback (close/destroy)
		oncomplete : ''
	},

	// "upload" command options.
	upload : {
		ui : 'uploadbutton'
	},

	// "quicklook" command options. For additional extensions
	quicklook : {
		autoplay : true,
		jplayer  : 'extensions/jplayer'
	},

	// configure custom editor for file editing command
	edit : {
		// list of allowed mimetypes to edit
		// if empty - any text files can be edited
		mimes : [],

		// edit files in wysisyg's
		editors : [
			// {
			// 	/**
			// 	 * files mimetypes allowed to edit in current wysisyg
			// 	 * @type  Array
			// 	 */
			// 	mimes : ['text/html'], 
			// 	/**
			// 	 * Called when "edit" dialog loaded.
			// 	 * Place to init wysisyg.
			// 	 * Can return wysisyg instance
			// 	 *
			// 	 * @param  DOMElement  textarea node
			// 	 * @return Object
			// 	 */
			// 	load : function(textarea) { },
			// 	/**
			// 	 * Called before "edit" dialog closed.
			// 	 * Place to destroy wysisyg instance.
			// 	 *
			// 	 * @param  DOMElement  textarea node
			// 	 * @param  Object      wysisyg instance (if was returned by "load" callback)
			// 	 * @return void
			// 	 */
			// 	close : function(textarea, instance) { },
			// 	/**
			// 	 * Called before file content send to backend.
			// 	 * Place to update textarea content if needed.
			// 	 *
			// 	 * @param  DOMElement  textarea node
			// 	 * @param  Object      wysisyg instance (if was returned by "load" callback)
			// 	 * @return void
			// 	 */
			// 	save : function(textarea, editor) {}
			// 
			// }
		]
	},

	// help dialog tabs
	help : { view : ['about', 'shortcuts', 'help'] }
}
```

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

### File manager initialization

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

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

```APIDOC
## File manager initialization

To initialize the file manager, the client sends a request with the `cmd=open` and `init=1` parameters.

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

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

### Client-side Configuration for Displaying File Descriptions

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

Initialize the elFinder client-side script, pointing to your connector URL. Configure the 'commandsOptions.info.custom' setting to define how the 'desc' command's output (the file description) will be displayed in the info dialog.

```html
<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

```

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

### getFileCallback function example

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

A callback function for the 'getfile' command, used for integrating elFinder with WYSIWYG editors. It receives file information and the elFinder instance.

```javascript
getFileCallback : function(file, elFinderInstance) {
    var url = file.url;
    var absoluteUrl = elFinderInstance.convAbsUrl(url);
    // Continue your function...
}
```

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

### open

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

Returns information about a requested directory and its content. It can optionally return the directory tree 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.

### Method
POST

### Endpoint
/api/v2/open

### Parameters
#### Query Parameters
- **init** (boolean) - Optional. If true, indicates an initialization request and the response must include the **api** value and **options** object. Affects **target** hash processing. If init is true and target is not set or the directory doesn't exist, the root directory of the default volume is returned. Otherwise, an error is returned.
- **target** (string) - Required if init is false or not set. Hash of the directory to open.
- **tree** (boolean) - Optional. If true, the response must contain subfolders trees of root directories.

### Response
#### Success Response (200)
- **api** (Number) - The version number of the protocol (>= 2). Returned only for init requests.
- **cwd** (Object) - Current Working Directory information.
- **files** (Array) - Array of objects representing files and directories in the current directory. If **tree** is true, includes subfolders to a specified depth.
- **netDrivers** (Array) - List of network protocols that can be mounted (e.g., ftp).
- **uplMaxSize** (String) - Optional. Allowed upload max size (e.g., "32M").
- **options** (Object) - Optional. Further information about the folder and its volume, including path, URLs, separator, disabled commands, copy overwrite settings, and archiver configurations.
- **debug** (Object) - Optional. Debug information if specified in the connector options.

### Request Example
```json
{
  "init": true,
  "target": "l1_Lw==",
  "tree": true
}
```

### Response Example
```json
{
  "api": 2,
  "cwd": {
    "hash": "l1_Lw==",
    "name": "root",
    "mime": "directory",
    "ts": 1670000000,
    "read": true,
    "write": true,
    "size": 0
  },
  "files": [
    {
      "hash": "l1_Lw==",
      "name": "root",
      "mime": "directory",
      "ts": 1670000000,
      "read": true,
      "write": true,
      "size": 0
    },
    {
      "hash": "l1_Zm9sZGVyMQ==",
      "name": "folder1",
      "mime": "directory",
      "ts": 1670000001,
      "read": true,
      "write": true,
      "size": 0
    }
  ],
  "netDrivers": ["ftp"],
  "options": {
    "path": "/var/www/html/files",
    "url": "http://localhost/files/",
    "tmbURL": "http://localhost/files/.tmb/",
    "separator": "/",
    "disabled": [],
    "copyOverwrite": 1,
    "archivers": {
      "create": ["application/x-tar", "application/x-gzip"],
      "extract": ["application/x-tar", "application/x-gzip"]
    }
  }
}
```
```

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

### Validate File Names with Regular Expression

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

Configure file name validation using a regular expression. This example disables file names containing spaces.

```javascript
// disable names with spaces
validName: /^[^\s]$/
```

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

### Basic elFinder Connector Initialization

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

Initializes elFinder with basic root configuration using the elFinderConnector wrapper.

```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();

```

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

### Initialize elFinder with Options

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

Basic initialization of the elFinder widget with essential configuration options like the connector URL and interface language.

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

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

### Configure File Permissions with Attributes

Source: https://github.com/studio-42/elfinder/wiki/Simple-file-permissions-control

Use the 'attributes' array within a driver configuration to set permissions based on patterns. The first matching pattern is applied.

```php
<?php
array(
	'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED)
	'path'   => 'path/to/files',   // path as root to files (REQUIRED)
	'attributes' => array(
																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																	

```

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

### Set Custom Date Format

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

Overwrite the default date format for file modifications. This example sets the format to 'Month Day, Year Hour:Minute AM/PM'.

```javascript
dateFormat : 'M d, Y h:i A' // will return Mar 13, 2012 05:27 PM
```

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

### elFinder Minimal PHP Connector Configuration

Source: https://github.com/studio-42/elfinder/blob/master/elfinder-minimal.html

Defines the elFinder client options, including the connector URL and a boot callback for initializing and customizing elFinder's behavior on boot.

```javascript
define('elFinderConfig', {
    // elFinder options (REQUIRED)
    // Documentation for client options:
    // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
    defaultOpts : {
        url : 'php/connector.minimal.php' // connector URL (REQUIRED)
        // 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 = '', cwd = fm.cwd();
                if (cwd) {
                    path = fm.path(cwd.hash) || null;
                }
                document.title = path? path + ':' + title : title;
            }).bind('destroy', function() {
                document.title = title;
            });
        }
    },
    managers : {
        // 'DOM Element ID': {
            /* elFinder options of this DOM Element */
        //}
        'elfinder': {}
    }
});
```

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

### get

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

Retrieves the content of a file as a UTF-8 string. It supports character encoding conversion for text files and returns Data URI Scheme strings for non-text files.

```APIDOC
## GET get

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

### Method
GET

### Endpoint
/get

### Parameters
#### Query Parameters
- **cmd** (string) - Required - `get`
- **current** (string) - Required - hash of the directory where the file is stored
- **target** (string) - Required - hash of the file
- **conv** (string) - Optional - 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
#### Success Response (200)
- **content** (string) - file contents (UTF-8 String or Data URI Scheme String) or `false`
- **encoding** (string) - Optional - Detected original character encoding (Required when converting from encoding other than UTF-8)
- **doconv** (string) - Optional - `
```

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

### Setup Upload Tab in CKEditor Dialog

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

This code configures the upload tab within a CKEditor dialog to integrate with elFinder. It customizes the 'browse' and 'upload' buttons' behavior.

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

        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function (dialog, i) {
                dialogName = CKEDITOR.dialog.getCurrent()._.name;
                if (dialogName === 'image2') {
                    dialogName = 'image';
                }
                if (elfNode) {
                    if (elfDirHashMap[dialogName] && elfDirHashMap[dialogName] != elfInstance.cwd().hash) {
                        elfInstance.request({
                            data     : {cmd  : 'open', target : elfDirHashMap[dialogName]},
                            notify : {type : 'open', cnt : 1, hideCnt : true},
                            syncOnFail : true
                        });
                    }
                    elfNode.dialog('open');
                }
            }
        } 
        
        if (uploadButton !== null && submitButton !== null) {
            uploadButton.hidden = false;
            submitButton.hidden = false;
            uploadButton.onChange = function() {
                inputId = this.domId;
            }
            // upload a file to elFinder connector
            submitButton.onClick = function(e) {
                dialogName = CKEDITOR.dialog.getCurrent()._.name;
                if (dialogName === 'image2') {
                    dialogName = 'image';
                }
                var target = elfDirHashMap[dialogName]? elfDirHashMap[dialogName] : elfDirHashMap['fb'],
                    name = $('#'+inputId),
                    input = name.find('iframe').contents().find('form').find('input:file'),
                    error = function(err) {
                        alert(elfInstance.i18n(err).replace('<br>', '\n'));
                    };
                
                if (input.val()) {
                    var fd = new FormData();
                    fd.append('cmd', 'upload');
                    fd.append('target', target);
                    fd.append('overwrite', 0); // Instruction to save alias when same name file exists
                    $.each(customData, function(key, val) {
                        fd.append(key, val);
                    });
                    fd.append('upload[]', input[0].files[0]);
                    $.ajax({
                        url: editor.config.filebrowserUploadUrl,
                        type: "POST",

```

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

### Connector Configuration with Custom Driver and elFinder

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

Include the custom volume driver and elFinder class files in your connector script. Configure the 'roots' option to use your custom 'MyDriver' and specify the path and URL.

```php
<?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();

```

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

### Initialize elFinder with PHP Connector

Source: https://github.com/studio-42/elfinder/blob/master/elfinder.legacy.html

Basic initialization of elFinder using the PHP connector. Ensure the connector URL is correctly specified.

```javascript
$(document).ready(function() {
    $('#elfinder').elfinder({
        // 1st Arg - options
        cssAutoLoad : false, // Disable CSS auto loading
        baseUrl : './', // Base URL to css/*, js/*
        url : 'php/connector.minimal.php' // connector URL (REQUIRED)
        // , lang: 'ru' // language (OPTIONAL)
    });
});
```

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

### Implement statCorrector Function

Source: https://github.com/studio-42/elfinder/wiki/Adding-new-column-to-list-view-in-2.1

Define a static function to retrieve and extend file stat information. This example uses a custom volume driver method to fetch owner details.

```php
public static function stat_corrector(&$stat, $path, $statOwner, $volumeDriveInstance) {
  $stat['owner'] = $volumeDriveInstance->MyOwnerFunction($volumeDriveInstance->encode($path));
}
```

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

### mkfile

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

Creates a new blank file within the specified target directory.

```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. [[Information about File/Directory|Client-Server-API-2.0#wiki-information-about-filedirectory]]
```

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

### Load Themes from Manifests

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

Configure elFinder to load themes by specifying a list of themes in the `themes` client option, with each theme pointing to a JSON manifest URL. The `theme` option then selects the default theme to be applied.

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

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

### Get Directory and File Sizes

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

Retrieves the total size, file count, and directory count for specified targets. Includes detailed size information per target for API versions 2.1030 and later.

```json
{
    "dirCnt": 2,
    "fileCnt": 2,
    "size": 10681,
    "sizes": {
        "l1_QWRkb24vanM": {
            "dirCnt": 1,
            "fileCnt": 1,
            "size": 5723
        }, 
        "l1_QWRkb24vcGhw": {
            "dirCnt": 1, 
            "fileCnt": 1, 
            "size": 4958
        }
    }
}
```

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

### List Available Jake Tasks

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

View all available tasks that can be executed with the 'jake' build tool.

```bash
jake --tasks
```

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

### Configure elFinder with 1.x Connector URL

Source: https://github.com/studio-42/elfinder/wiki/Using-elFinder-2.x-UI-with-1.x-connector

Define the 'url' option pointing to your elFinder 1.x connector endpoint and instantiate the 'elFinderSupportVer1' transport class. This setup is required for the 2.x UI to communicate with the 1.x connector.

```javascript
$().ready(function() {
	$('#finder').elfinder({
		url : '../elfinder-1.x/src/connectors/php/connector.php',
		transport : new elFinderSupportVer1(),
		// more options
	});
});
```

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

### Implement Custom Command Logic

Source: https://github.com/studio-42/elfinder/wiki/Custom-context-menu-command

Define the 'exec' and 'getstate' methods for your custom command. 'exec' contains the command's functionality, and 'getstate' controls its availability.

```javascript
elFinder.prototype.commands.custom= function() {
          this.exec = function(hashes) {
                //implement what the custom command should do here
          }
          this.getstate = function() {
                //return 0 to enable, -1 to disable icon access
                return 0;
          }
}
```

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

### Custom elFinder Class with Description Command Implementation

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

Extend the main elFinder class to register and handle the custom 'desc' command. This includes defining error constants and implementing the command logic to interact with the volume driver.

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

  // ...
}

```

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

### CodeIgniter Integration with elFinder JavaScript Configuration

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

This snippet shows the JavaScript configuration for elFinder, including RequireJS setup, jQuery version determination for IE8 compatibility, and the loading of elFinder and its dependencies. It's essential for initializing elFinder within a web page.

```javascript
            })();
        </script>
    </head>
    <body>

        <!-- Element where elFinder will be created (REQUIRED) -->
        <div id="elfinder"></div>

    </body>
</html>
```

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

### Command List

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

Provides a list of all available commands for interacting with the file manager.

```APIDOC
## Command List

The following commands are supported by the API:

- **open**: Opens a directory and initializes data. Used for the first iteration when no directory is defined.
- **file**: Outputs file contents to the browser for download or preview.
- **tree**: Returns a list of child directories for a given directory.
- **parents**: Returns parent directories and their subdirectory children.
- **ls**: Lists files within a specified directory.
- **tmb**: Creates thumbnails for selected files.
- **size**: Returns the size of selected files or the total size of folders.
- **dim**: Returns the dimensions of images.
- **mkdir**: Creates a new directory.
- **mkfile**: Creates a new text file.
- **rm**: Deletes files or directories.
- **rename**: Renames a file or directory.
- **duplicate**: Creates a copy of a file.
- **paste**: Copies or moves files.
- **upload**: Uploads a file to the server.
- **get**: Outputs the contents of a plain text file for preview.
- **put**: Saves the content of a text file.
- **archive**: Creates an archive of files or directories.
- **extract**: Extracts the contents of an archive.
- **search**: Searches for files based on specified criteria.
- **info**: Returns information about files, used by the client "places" UI.
- **resize**: Modifies an image file (resize, crop, rotate).
- **netmount**: Mounts a network volume during a user session (currently only FTP is supported).
```

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

### Configure elFinder Connector with Custom Volume and elFinder

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

Include the custom volume driver and elFinder subclass in your connector configuration. Set the 'driver' option to 'MyDriver' and instantiate elFinderConnector with your custom elFinder object.

```php
<?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.'elFinderVolumeMyDrive.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();

```

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

### Build elFinder

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

Execute the build script to compile and compress elFinder. This process creates single minified JS and CSS files in the _build directory.

```bash
npm run build
```

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

### Execute Jake Directly

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

Execute the 'jake' build tool directly from the local 'node_modules/.bin' directory within the elFinder project.

```bash
./node_modules/.bin/jake
```

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

### ls

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

Returns a list of file names within the specified target directory.

```APIDOC
## ls

### Description
Return a list of file names in the target directory.

### Arguments
* *cmd* : ls
* *target* : hash of directory

### Response
* *list* : (Array) Files list.
```