elFinder file manager for Yii 2

This extension integrates an elFinder 2.1 file manager into Yii framework 2.0.

Installation

Install extension through composer:

composer require alexantr/yii2-elfinder

Usage

Configure actions

For using elFinder you must create and configure controller. See complete example with actions for elFinder's connector, InputFile widget, CKEditor filebrowser* options and TinyMCE file_picker_callback option:

<?php

namespace app\controllers;

use alexantr\elfinder\CKEditorAction;
use alexantr\elfinder\ConnectorAction;
use alexantr\elfinder\InputFileAction;
use alexantr\elfinder\TinyMCEAction;
use Yii;
use yii\web\Controller;

class ElfinderController extends Controller
{
    public function actions()
    {
        return [
            'connector' => [
                'class' => ConnectorAction::className(),
                'options' => [
                    'roots' => [
                        [
                            'driver' => 'LocalFileSystem',
                            'path' => Yii::getAlias('@webroot') . DIRECTORY_SEPARATOR . 'uploads',
                            'URL' => Yii::getAlias('@web') . '/uploads/',
                            'mimeDetect' => 'internal',
                            'imgLib' => 'gd',
                            'accessControl' => function ($attr, $path) {
                                // hide files/folders which begins with dot
                                return (strpos(basename($path), '.') === 0) ?
                                    !($attr == 'read' || $attr == 'write') :
                                    null;
                            },
                        ],
                    ],
                ],
            ],
            'input' => [
                'class' => InputFileAction::className(),
                'connectorRoute' => 'connector',
            ],
            'ckeditor' => [
                'class' => CKEditorAction::className(),
                'connectorRoute' => 'connector',
            ],
            'tinymce' => [
                'class' => TinyMCEAction::className(),
                'connectorRoute' => 'connector',
            ],
        ];
    }
}

Reed elFinder docs to configure connector options.

InputFile widget

Example of InputFile widget with enabled mime filter and preview:

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'filter' => ['image'],
    'preview' => function ($value) {
        return yii\helpers\Html::img($value, ['width' => 200]);
    },
]) ?>

Note 1: Filter option is using to display only certain files based on their mime type. Check onlyMimes option in elFinder docs.

Note 2: Preview displays only predefined (saved earlier) input value and not updating on the fly after new selection.

If you want to use the InputFile widget in ActiveForm, it can be done like this:

<?= $form->field($model, 'attributeName')
    ->widget(alexantr\elfinder\InputFile::className(), [
        'clientRoute' => 'elfinder/input',
    ]) ?>

Using textarea instead text input (can be useful with enabled multiple selection):

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'textarea' => true,
    'textareaRows' => 3, // default is 5
]) ?>

Enable multiple selection to select more than one file in one input:

<?= alexantr\elfinder\InputFile::widget([
    'name' => 'attributeName',
    'clientRoute' => 'elfinder/input',
    'multiple' => true,
]) ?>

Default paths separator for text input is comma and newline character for textarea. You can change them in InputFileAction configuration:

class ElfinderController extends Controller
{
    public function actions()
    {
        return [
            // ...
            'input' => [
                'class' => InputFileAction::className(),
                'connectorRoute' => 'connector',
                'separator' => ',',
                'textareaSeparator' => '\n', // newline character in javascript
            ],
            // ...
        ];
    }
}

Integration with CKEditor

For using elFinder with CKEditor widget (like this one) you need to specify options filebrowserBrowseUrl and (or) filebrowserImageBrowseUrl:

<?= alexantr\ckeditor\CKEditor::widget([
    'name' => 'attributeName',
    'clientOptions' => [
        // ...
        'filebrowserBrowseUrl' => yii\helpers\Url::to(['elfinder/ckeditor']),
        'filebrowserImageBrowseUrl' => yii\helpers\Url::to(['elfinder/ckeditor', 'filter' => 'image']),
    ],
]) ?>

Note: For filebrowserImageBrowseUrl we use filter query param to display only images.

Integration with TinyMCE 4 & 5

For using elFinder with TinyMCE widget (like this one) you need to specify option file_picker_callback:

<?= alexantr\tinymce\TinyMce::widget([
    'name' => 'attributeName',
    'clientOptions' => [
        // ...
        'file_picker_callback' => alexantr\elfinder\TinyMCE::getFilePickerCallback(['elfinder/tinymce']),
    ],
]) ?>

Note: option file_picker_callback available since 4.1.0 version of TinyMCE js plugin.

With second param in getFilePickerCallback() you can set additional settings for tinymce.activeEditor.windowManager.open (TinyMCE 4) or tinymce.activeEditor.windowManager.openUrl (TinyMCE 5):

TinyMCE::getFilePickerCallback(['elfinder/tinymce'], ['width' => 1200, 'height' => 600])

Standalone file manager

Add ElFinder widget to any view:

<?= alexantr\elfinder\ElFinder::widget([
    'connectorRoute' => ['elfinder/connector'],
    'settings' => [
        'height' => 640,
    ],
    'buttonNoConflict' => true,
]) ?>

Note: If you are using Bootstrap 3 enable buttonNoConflict option to resolve conflict between Bootstrap and jQuery UI buttons.

Links

• elFinder Wiki
• CKEditor widget by alexantr
• TinyMCE widget by alexantr
• CKEditor widget by 2amigos
• TinyMCE widget by 2amigos
• Yii framework site