elFinder Documentation

elFinder provides a web-based file manager with the following capabilities:

• Usability: MacOS Finder or Windows Explorer style interface.
• Mobile: Touch-friendly view.
• Remote Operations: Copy, move, upload, create folder/file, rename, etc.
• Storage Drivers: Local file system, MySQL, FTP, SFTP, Box, Dropbox, GoogleDrive, and OneDrive.
• Cloud Support: AWS S3, Azure, Digital Ocean Spaces via League\Flysystem driver.
• File Handling: Background uploads (HTML5 Drag & Drop), chunked uploads for large files, and archive creation/extraction (zip, rar, 7z, tar, gzip, bzip2).
• UI/UX: List and Icons views, keyboard shortcuts, drag & drop, and rich context menus.
• Extensibility: Simple client-server API based on JSON and event handling for both backend and client side.

For development and debugging, clone the repository directly to your PHP server:

1. Clone the repository:

   $ git clone https://github.com/Studio-42/elFinder.git

2. Rename /php/connector.minimal.php-dist to /php/connector.minimal.php.
3. Load /elfinder.src.html in your browser to run elFinder.

To set up elFinder for production, use the compressed builds:

1. Download and unzip one of the builds to your PHP server.
2. Rename /php/connector.minimal.php-dist to /php/connector.minimal.php.
3. Load /elfinder.html in your browser to run elFinder.

The paste command allows you to paste files or directories from the elFinder clipboard into a target directory.

Behavior

• Move vs Copy: If the files in the clipboard were originally 'cut' (moved), the command performs a move. If they were 'copied', it performs a copy.
• Targeting: If a selection is provided, the files are pasted into the selected item (which must be a directory). If no selection is provided, they are pasted into the current working directory (cwd).
• Duplicates: If files are pasted into their own parent directory, elFinder creates duplicates to avoid conflicts.
• Conflicts: If copyOverwrite is enabled and files already exist in the destination, elFinder will prompt the user to either replace the existing files or rename the incoming files (backup).

Keyboard Shortcut

• ctrl+v shift+insert

The debug tab is available if the debug option is set to true in the elFinder configuration and the project has jQuery UI Tabs installed.

When a backenddebug event is triggered with debug data, the help dialog can display detailed information about the current command's options and debug state. This is useful for inspecting the internal state of elFinder during development.

The elFinder resize command provides a dialog interface for manipulating images. Depending on the available API version and file type, users can perform the following operations:

• Resize: Adjust width and height, apply presets, and control JPEG quality.
• Crop: Define specific X/Y coordinates and dimensions for cropping.
• Rotate: Rotate the image by degrees (including 90/270 degree increments) and set a background color.

Key Features:

• Presets: Quick application of predefined dimensions.
• Quality Control: Adjust JPEG compression levels.
• 8px Grid: Support for 8px grid alignment (specifically for JPEGs).
• Save vs Save As: If the server supports it, users can choose to overwrite the original file or save the result as a new file.
• Visual Preview: Real-time preview of changes within a dialog window.

Archive behavior is controlled by the archivers configuration object.

• archivers.create: An array of MIME types that are supported for creating new archives (e.g., ['application/zip', 'application/x-tar']).
• archivers.createext: A mapping object that defines the file extension to use for a specific MIME type (e.g., { 'application/zip': 'zip' }).

When creating an archive, the filename is generated as follows:

• If multiple files are selected: Archive.[extension]
• If a single file is selected: [filename].[extension]

The help command can load external HTML content for the "Help" tab. By default, it attempts to fetch content from fm.i18nBaseUrl + 'help/{lang}.html.js'. If the language-specific file is not found, it falls back to the English version (en).

You can override this behavior by providing a custom URL in the helpSource option.

To reduce clutter in the information dialog, you can prevent specific fields from being displayed using the hideItems option. This option accepts an object where keys correspond to the field names and values are booleans.

Supported keys for hiding:

• size
• aleasfor (Alias for)
• path
• link
• dim (Dimensions)
• modify (Modification date)
• perms (Permissions)
• locked
• owner
• group
• perm (File mode)
• Custom labels defined in options.custom

Example Configuration:

// Example of hiding size and path in the info dialog
options: {
  hideItems: {
    size: true,
    path: true
  }
}