alexantr/yii2-elfinder elFinder file manager for Yii 2

widgetfilemanagerelfinder

elFinder file manager for Yii 2

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

Latest Stable Version Total Downloads License Build Status

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 then 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

For using elFinder with TinyMCE 4 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 tinymce.WindowManager.open settings:

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

Changelog

Yii Framework 2 elFinder extension Changelog

1.7.0 2019-05-14

  • Set minimum elFinder version to 2.1.49 for security reasons
  • Added option nameOnly to InputFileAction

1.6.0 2019-05-13

  • Added option inputCssClass to InputFile to bring back CSS class "yii2-elfinder-input" in Yii >=2.0.17

1.5.0 2018-08-27

  • Now can set $clientRoute as array in InputFile

1.4.0 2018-08-14

  • TinyMCE: set filter param for file_picker_callback types

1.3.0 2018-04-02

  • Set minimum elFinder version to 2.1.37 for security reasons

1.2.1 2018-03-15

  • Removed custom styles forced box-sizing

1.2.0 2018-03-07

  • Moved some JS code to helper.js
  • Replaced previewTemplate with previewTag and previewOptions
  • Added special classes to input, button and preview container
  • Show filter and multiple options in input's data-attributes

1.1.6 2017-11-04

  • Set baseUrl option in widget

1.1.5 2017-07-17

  • Set default height to "100%" for elFinder >= 2.1.25

1.1.4 2017-06-14

  • Fixed error "jQuery.fn.button.noConflict is not a function"

1.1.3 2017-05-29

  • Updated InputFileAction: send change event to input after file(s) selected.

1.1.2 2016-11-24

  • Added option to change textarea rows number
  • Simplify TinyMCE callback

1.1.1 2016-11-23

  • Add option to resolve conflict between Bootstrap 3 and jQuery UI

1.1.0 2016-11-21

  • Added TinyMCE 4 support

1.0.0 2016-11-20

  • Initial release

Statistics

Downloads
GitHub Stars
GitHub Forks

Releases

Comments



1.7.0 is the latest of 15 releases



MIT license
Stats
18 github stars & 4 github forks
105 downloads in the last day
1679 downloads in the last 30 days
17239 total downloads