This extension integrates an elFinder 2.1 file manager into Yii framework 2.0.
Install extension through composer:
composer require alexantr/yii2-elfinder
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.
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
],
// ...
];
}
}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.
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])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.