Yii 1.1: ezzeelfinder

An extension used to integrate ElFinder file manager.
23 followers

This extension allows you to integrate ElFinder file manager into your Yii web site's pages. Comparing with elfinder-widget extension this one is implemented with an attempt to provide a more flexible way to configure both ElFinder's client and connector and to link the manager with WYSIWYG editor (only CKEditor is supported at the moment). The extension also relies on the latest release of ElFinder 2.0-rc1 (10th of April, 2012).

Requirements

The extension was written and tested with Yii 1.1.10 but it's up to you to try this one with the earlier version of the framework. Other requirements are all relative to ElFinder and depend on which features you need to support. For instance, one may wish to use PHP's FileInfo extension to check MIME-types of uploaded files.

Changelog

Since version 0.0.2:

  • it's possible to specify such client options as functions using js: prefix in PHP code. Please refer to clientOptions parameter's description for details.

Since version 0.0.3:

  • multiple ElFinder instances' initialization bug has been fixed.

Since version 0.0.4:

Since version 0.0.5: - overwriting existing files on upload bug has been fixed, thanks to quim3ra.

Installation

Extract an archive with the extension to directory of your web application's extensions. By default it's protected/extensions. As the result a new subdirectory named ezzeelfinder will appear in your extension's directory.

Usage

In order to use the extension one have to do the following simple steps:

1). Create an action of a controller that will render a page with ElFinder. Let's suppose that controller class' name is AdminController, action function's name is actionFileUploader and action view's file is views/fileUploader.php.

2). Implement actions method in AdminController as follows:

public function actions()
{
    return array(
        'fileUploaderConnector' => "ext.ezzeelfinder.ElFinderConnectorAction",
    );
}

where fileUploaderConnector is a name of action to refer to ElFinder's connector PHP script. Doing it the such way allows to restrict an access to ElFinder using controller's accessRules().

3). Insert a call of extension's widget in view file fileUploader.php. As an example, it may look like that:

<div id="file-uploader"></div>
 
<?php
 
$filesPath = realpath(Yii::app()->basePath . "/../upload");
$filesUrl = Yii::app()->baseUrl . "/upload";
 
$this->widget("ext.ezzeelfinder.ElFinderWidget", array(
    'selector' => "div#file-uploader",
    'clientOptions' => array(
        'lang' => "ru",
        'resizable' => false,
        'wysiwyg' => "ckeditor"
    ),
    'connectorRoute' => "admin/fileUploaderConnector",
    'connectorOptions' => array(
        'roots' => array(
            array(
                'driver'  => "LocalFileSystem",
                'path' => $filesPath,
                'URL' => $filesUrl,
                'tmbPath' => $filesPath . DIRECTORY_SEPARATOR . ".thumbs",
                'mimeDetect' => "internal",
                'accessControl' => "access"
            )
        )
    )
));
 
?>

There are four possible parameters that can be passed to the widget:

selector - jQuery selector used to point to container element ElFinder must be appended to. This parameter is optional and defaults to #elfinder;

clientOptions - an array of ElFinder's client configuration options described here. Please note, there is also wysiwyg possible option that is not supported by ElFinder but is used to let the extension know if ElFinder is to be linked with some WYSIWYG editor by setting getFileCallback function. Since version 0.0.2 of the extension it's also possible to specify client's functions and handlers using js: prefix in the following manner:

'clientOptions' => array(
    'getFileCallback' => "js: function(file) {
                              alert('Selected file is \"' + file + '\".')
                          }",
    'handlers' => array(
        'init' => "js: function(event, elFinder) {
                       alert('ElFinder has been initialized.')
                   }",
        'open' => "js: function(event, elFinder) {
                       var path = event.data.options.path;
                       alert('Directory \"' + path + '\" is open.')
                   }"
    )
)

Please note that if both wysiwyg and getFileCallback are specified then a behavior of the former will be overriden by the latter.

connectorRoute - Yii route to ElFinder's connector action (admin/fileUploaderConnector).

connectorOptions - an array of ElFinder's connector configuration options as described here. In the case of LocalFileSystem driver options path and URL of the roots are required to point to files' storage within file system and outside. By default connectorOptions parameter is equal to

array(
    'roots' => array(
        array(
            'driver'  => "LocalFileSystem",
            'path' => realpath(Yii::app()->basePath . "/../files"),
            'URL' => "/files",
            'accessControl' => "access"
        )
    )
)

meaning that files' storage directory is files and located in the document root (supposing that Yii's application directory is also in the document root).

connectorOptions are restricted by query string's length 'cause they are passed to ElFinder's connector action as serialized GET-parameter.

Some people using elfinder-widget faced the problem of PHP FileInfo extension requirement. But not all servers' configurations support it. The problem can be solved by setting ElFinder's connector option mimeDetect to internal (as shown in code snippet above) forcing ElFinder to check uploaded files by their extensions only.

Additional Notes

1). I recommend ckeditor-integration extension to use ElFinder with CKEditor. In order to locate ElFinder from CKEditor extension use filebrowserBrowseUrl like this:

$this->widget('ext.ckeditor.CKEditorWidget', array(
    'model' => $model,
    'attribute' => "body",
    'defaultValue' => $model->body,
    'config' => array(
        'height' => "400px",
        'width' => "100%",
        'language' => "ru",
        'filebrowserBrowseUrl' => $this->createUrl("admin/fileUploader")
    )
)

2). ElFinder core files are included in this extension so there is no need to download ElFinder. But one may wish to update these files by replacing assets/css, assets/img, assets/js and php directories of the extension with corresponding directories of ElFinder's latter release.

Resources

ElFinder

CKEditor

Extension's page on github.com

Total 13 comments

#15767 report it
blupointmedia at 2013/12/15 04:37pm
Read/Write/Lock/Hide Folder/Files

I am trying to lock specific folders/files in a root directory, but it is not locking with this code.

$this->widget("application.extensions.ezzeelfinder.ElFinderWidget", array(
'selector' => "div#file-uploader",
'clientOptions' => array(
    'resizable' => false,
    'wysiwyg' => 'ckeditor',
    ...
),
'connectorRoute' => "directory/fileUploaderConnector",
'connectorOptions' => array(
    'roots' => array(
        array(
            'debug' => true,
            'driver'  => "LocalFileSystem",
            'path' => $filesPath,
            'URL' => $filesUrl,
            'tmbPath' => $tmbPath . DIRECTORY_SEPARATOR . ".thumbs",
            'mimeDetect' => "internal",
            'accessControl' => "access",
            'attributes' => array(
                array(
                    'pattern' => '/^test3\/$/',
                    'read' => true,
                    'write' => false,
                    'hidden' => false,
                    'locked' => true
                ),
            ),
        )
    )
)
));
#15301 report it
Ezze at 2013/10/25 03:08pm
CSRF validation

To extend Dayak Ngoding's note I was able to make elFinder to work with CSRF validation enabled also by setting requestType client option to post:

'requestType' => "post",
'customData' => array(
    Yii::app()->request->csrfTokenName => Yii::app()->request->csrfToken
)
#12302 report it
bigN at 2013/03/12 07:50am
Greek filenames

Hi, I have problem with saving Greek Filenames. For example, while I see those files correctly rendered on elFilnder browser when i go to physical directory, where the files are stored, I see file-names with "Chinese" symbols. Also, if I upload files, with greek names manually, elFilnder won't show them up. Any help pls.:)

#11478 report it
Dayak Ngoding at 2013/01/15 11:08pm
When 'enableCsrfValidation' => true then we got "Unable to connect to backend."

If you got that problem when your CSRF option in YII activated, then you need to set value of customData properties of client configuration action with YII_CSRF_TOKEN.

Here is the clue how to set the value:

// client options //
$clientOptions = array(
    'resizable' => true,
    'customData' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken),
);
#10791 report it
Ezze at 2012/11/23 04:54pm
Version 0.0.2

Now it's possible to specify such client options as functions using js: prefix in PHP code. Please refer to clientOptions parameter's description for details.

#10371 report it
skall at 2012/10/23 12:08pm
Unable to connect to backend - alternate solutions

Hi !

First of all, great extension ! Exactly what I was looking for.

I did have the 'unable to connect to backend' error, and in my case, 2 steps were required to solve the issue. I had CSRF validation on, I turned it off, and the error msg changed to 'unable to upload file xxxx.jpg', which led me to verify folder rights (755). I changed those rights (for this folder only) and now everything is working.

Hope that help someone.

xps_gunner

#10246 report it
Ezze at 2012/10/13 03:58pm
Re: Unable to connect to backend Too

Dear itmagetan!

Please make sure that you follow instructions strictly and refer to the comments below. Some people already had the same issue (or something like that). Make sure that connector script is accessable if you type its link in browser's address bar. I've never tested Yii and this extension on Windows but according to your error message it's some permission issue.

#10237 report it
itmagetan at 2012/10/13 06:03am
Unable to connect to backend Too

Great & nice extension. This is what i need and looking for.

I faced problem "Unable to connect to backend. Access denied." What's going wrong? i followed all installation and usage steps above.

I'm using Windows 7 and Apache Friends XAMPP (Basis Package) version 1.7.3. Please help, thank you.

#10100 report it
st4nny at 2012/10/04 08:58am
solve 404 on connectori fileUploaderConnector

for the 404error on '/admin/fileUploaderConnector' for the connector

I solved rewriting /admin/fileUploaderConnector to 'connectorRoute' => "admin/fileuploaderconnector",

and so

public function actions() { return array( 'fileuploaderconnector' => "ext.ezzeelfinder.ElFinderConnectorAction", ); }

for the linux CaseSansitive filesystem.

#8825 report it
Ezze at 2012/07/01 08:38am
Re: Unable to connect to backend

Dear, shalaby.

The mentioned error means that ElFinder is unable to receive an answer from files' uploading script (so-called connector). Please, make sure that you specify a valid URL to connector's action in widget's call (connectorRoute parameter). For example, if your controller is site (SiteController class) and your connector's action is uploaderConnector (specified as key of an array in actions() method) then your widget's call will look like this:

$this->widget("ext.ezzeelfinder.ElFinderWidget", array(
    'selector' => "...",
    'clientOptions' => array(
        ...
    ),
    'connectorRoute' => "site/uploaderConnector",
    'connectorOptions' => array(
        'roots' => array(
            array(
                ...
            )
        )
    )
));

In my example controller's name is admin (AdminController class) and connector's action is fileUploaderConnector. That's why my widget's controllerRoute is admin/fileUploaderConnector.

Please let me know if this helps.

#8802 report it
shalaby at 2012/06/27 04:28pm
Unable to connect to backend

Thanks for your great extension, i did exactly what you said, and it gives me this message "Unable to connect to backend. backend not found.", i created a controller and inside it the actions function, and the fileUploader action, but you said something about creating another action if so please write the code it should be in it.

#8082 report it
Ezze at 2012/05/09 05:31am
Re: JSON error

Good time of a day!

I can't tell you what's exactly wrong with your configuration of the extension but it seems to me that the problem is in ElFinder's connector script.

As you can see you need two actions within your controller to force ElFinder to work.

The former renders ElFinder's intreface and it works for you if you can see it and an error message (note that you need an empty layout for ElFinder's view if you want to open ElFinder in popup window from CKEditor).

The latter action named fileUploaderConnector in my example refers to ElFinderConnectorAction (ElFinderConnectorAction.php file of the extension). This one is responsible for images' uploading and providing an information (in JSON format) about files already uploaded to the server. Make sure that you have a valid alias ext.ezzeelfinder.ElFinderConnectorAction in your actions() method of the controller. The same name of this action (fileUploaderConnector) must be passed as part of connectorRoute parameter to extension's widget call. For example, if your controller's name is admin then connectorRoute will be admin/fileUploaderConnector.

If your browser is Mozilla Firefox you can also use FireBug to check the response of controller script's request on the "Network" tab. In particular, the response code of /admin/fileUploaderConnector must be not 404 meaning that ElFinder refers to an existing script of the connector.

#8079 report it
msimaremare at 2012/05/08 08:10pm
JSON error

hi! i am actually looking for extension which enables user to insert images, files, and probably videos into a text. i have setup the ckeditor extension for the editor and would add a file manager into it. this extension seems perfectly suit that requirement and quite clear steps are explained above. at the last, i found this poped up when i tried to browse from server in order to select a proper image which i was going to be inserted. "Invalid backend response. Data is not JSON." could you tell me if there is something need to do to fix that. one last question, how to enable the upload mechanism,.?

thanks for your extension,.!

Leave a comment

Please to leave your comment.

Create extension