Yii 1.1: yii-elfinder2

This extension allows use elFinder file manager in your Yii application.
6 followers

This extension allows use elFinder file manager in your Yii application. Possible usage:

  • chose file on server side (ServerFileInput widget)
  • manage files in specified folder (ElFinder widget)
  • add file browser to tinyMce wysiwyg editor

Based on elfinder extension by Bogdan Savluk with updated elFinder and some code improvements.

Requirements

Tested with Yii 1.1.14, but should work with previous versions too.

Installation

Copy extension files to your project to protected/extensions/elFinder

Usage

  1. Create controller for connector action, and configure it params

    class ElfinderController extends Controller {
     
        // don't forget configure access rules
     
        public function actions() {
            return array(
                // main action for elFinder connector
                'connector' => array(
                    'class' => 'ext.elFinder.ElFinderConnectorAction',
                    // elFinder connector configuration
                    // https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
                    'settings' => array(
                        'roots' => array(
                            array(
                                'driver' => 'LocalFileSystem',
                                'path' => Yii::getPathOfAlias('webroot') . '/files/',
                                'URL' => Yii::app()->baseUrl . '/files/',
                                'alias' => 'Root Alias',
                                'acceptedName' => '/^[^\.].*$/', // disable creating dotfiles
                                'attributes' => array(
                                    array(
                                        'pattern' => '/\/[.].*$/', // hide dotfiles
                                        'read' => false,
                                        'write' => false,
                                        'hidden' => true,
                                    ),
                                ),
                            )
                        ),
                    )
                ),
                // action for TinyMCE popup with elFinder widget
                'elfinderTinyMce' => array(
                    'class' => 'ext.elFinder.TinyMceElFinderPopupAction',
                    'connectorRoute' => 'connector', // main connector action id
                ),
                // action for file input popup with elFinder widget
                'elfinderFileInput' => array(
                    'class' => 'ext.elFinder.ServerFileInputElFinderPopupAction',
                    'connectorRoute' => 'connector', // main connector action id
                ),
            );
        }
     
    }
  2. ServerFileInput - use this widget to choose file on server using elFinder pop-up

    $this->widget('ext.elFinder.ServerFileInput', array(
        'model' => $model,
        'attribute' => 'field_name',
        'popupConnectorRoute' => 'elfinder/elfinderFileInput', // relative route for file input action
        // ability to customize "Browse" button
    //  'customButton' => TbHtml::button('Browse images', array(
    //      'id' => TbHtml::getIdByName(TbHtml::activeName($model, 'field_name')) . 'browse',
    //      'class' => 'btn', 'color' => TbHtml::BUTTON_COLOR_DEFAULT,
    //      'size' => TbHtml::BUTTON_SIZE_DEFAULT, 'style' => 'margin-left:10px;')),
        // title for popup window (optional)
        'popupTitle' => 'Files',
    ));
  3. ElFinderWidget - use this widget to manage files

    $this->widget('ext.elFinder.ElFinderWidget', array(
        'connectorRoute' => 'elfinder/connector', // relative route for elFinder connector action
    ));
  4. TinyMceElFinder - use this widget to integrate elFinder with yii-tinymce

    $this->widget('ext.tinymce.TinyMce', array(
        'model' => $model,
        'attribute' => 'content',
        'fileManager' => array(
            'class' => 'ext.elFinder.TinyMceElFinder',
            'popupConnectorRoute' => 'elfinder/elfinderTinyMce', // relative route for TinyMCE popup action
            // title for popup window (optional)
            'popupTitle' => "Files",
        ),
    ));

Resources

Total 20 comments

#18166 report it
rob006 at 2014/09/18 01:54pm
Re: uiOptions

In example 'elfinderTinyMce' is a action, that display popup with elFinder for TinyMCE - settings are apply to elFinder, not TinyMce.

#18165 report it
sn4k3 at 2014/09/18 01:49pm
Re: uiOptions

Oh, ok... i was asking for ui buttons for elfinder toolbar not tinymce, any way to disable from elfinder?

#18164 report it
rob006 at 2014/09/18 01:37pm
Re: uiOptions

You should use uiOptions in popup action (eg. 'elfinderTinyMce'), not in connector action. I gave an example here: http://www.yiiframework.com/extension/yii-elfinder2/#c18112

#18163 report it
sn4k3 at 2014/09/18 01:25pm
Re: uiOptions

Oh ok, nice to know thats the newest version :) my code is the following:

'connectorAvisos' => array(
                'class' => 'ext.elFinder.ElFinderConnectorAction',
                // elFinder connector configuration
                // https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
                'settings' => array(
                    //'locale' => 'pt.UTF-8',
                    'uiOptions' => array(
                        // toolbar configuration
                        'toolbar' => array(
                            array('quicklook', 'editimage'),
                        ),
                    ),
 
                    'roots' => array(
                        array(
                            'driver' => 'LocalFileSystem',
                            'path' => Yii::getPathOfAlias('webroot') . '/../files/avisos',
                            'URL' => '/',
                            'alias' => 'Avisos',
                            'acceptedName' => '/^[^\.].*$/', // disable creating dotfiles
                            'attributes' => array(
                                array(
                                    'pattern' => '/\/[.].*$/', // hide dotfiles
                                    'read' => false,
                                    'write' => false,
                                    'hidden' => true,
                                ),
                            ),
                            'uploadMaxSize' => '5M',
                            'uploadAllow' => $INTRAFORBOX_ALLOWED_MIMETYPES, # allow any images
                            'uploadDeny'  => array('all'),
                            'uploadOrder' => 'deny,allow'
                        )
                    ),
                )
            ),

Also image thumbnail is not showing on finder, but they are created on server without problem.

#18162 report it
rob006 at 2014/09/18 01:08pm
Re: uiOptions

This extension use elFinder in newer version than rc1.

I never use uiOptions so i can't help you, especially if I can't see your code.

#18161 report it
sn4k3 at 2014/09/18 12:00pm
uiOptions

I have read the comments and i have tried use the uiOptions with toolbar, it didn't work... any advices? Also its possible to update to rc1?

Thanks

#18160 report it
sn4k3 at 2014/09/18 11:36am
Re: Change root on user

Thanks, it works :)

#18158 report it
rob006 at 2014/09/18 06:39am
Rre: Change root on user

Try to define many connector actions with different configuration eg:

//
     public function actions() {
        return array(           
            'connectorFirst' => array(
                // config
            ),
            'connectorSecond' => array(
                // config
            ),
            'elfinderTinyMceFirst' => array(
                'class' => 'ext.elFinder.TinyMceElFinderPopupAction',
                'connectorRoute' => 'connectorFirst',
            ),
            'elfinderTinyMceSecond' => array(
                'class' => 'ext.elFinder.TinyMceElFinderPopupAction',
                'connectorRoute' => 'connectorSecond',
            ),
        );
    }
#18156 report it
sn4k3 at 2014/09/18 04:36am
Change root on user

Hello,

This is a great extension! But i'm tring to change/set different root per function, so i want to define root with different path for some forms.

It is possible?

Thanks for your work

#18118 report it
rob006 at 2014/09/12 05:03am
Re: custom button in tinymce

Like I said, you should add this into configurations of action that displays popup with elfinder (in ElfiderController).

#18117 report it
ujw@1 at 2014/09/12 04:48am
custom button in tinymce

Isn't this a way for custom elfinder button in tinymce?? I see no change with this.. can I get help on this plz??

function elFinderBrowser (field_name, url, type, win) {
            tinymce.activeEditor.windowManager.open({
                file: adminUrl +'elFinder/elfinderTinyMce',
                title: 'File Manager',
                width: 900,
                height: 450,
                resizable: 'yes',
                uiOptions: {
                    toolbar : [
                        ['open'],
                        ['back', 'forward'],
                        ['reload'],
                        ['home', 'up'],
                        ['mkfile', 'upload'],
                        ['info'],
                        ['quicklook'],
                        ['copy', 'cut', 'paste'],
                        ['rm'],
                        ['duplicate', 'rename', 'edit'],
                        ['extract', 'archive'],
                        ['search'],
                        ['view'],
                    ]
                },
            },
            {
                setUrl: function (url) {
                    win.document.getElementById(field_name).value = url;
                }
            }
          );
          return false;
        }
#18112 report it
rob006 at 2014/09/11 06:51am
Re: custom button

Try something like that in popup action configuration (not tested):

// action for file input popup with elFinder widget
            'elfinderFileInput' => array(
                'class' => 'ext.elFinder.ServerFileInputElFinderPopupAction',
                'connectorRoute' => 'connector', // main connector action id,
                'settings' => array(
                    'uiOptions' => array(
                        // toolbar configuration
                        'toolbar' => array(
                            ['quicklook', 'editimage'],
                            /*['copy', 'cut', 'paste'],*/
                        ),
                    ),
                ),
            ),

https://stackoverflow.com/a/16606500

#18111 report it
ujw@1 at 2014/09/11 06:24am
custom button

I don't need all buttons of toolbar. So how can I disable the buttons of toolbar??

#17079 report it
rob006 at 2014/04/30 01:19pm
Re: elfinder2 css conflict with bootstrap twitter

The best solution right now is run elFinder in simple iframe without TB. ServerFileInput and TinyMceElFinder works in this way.

#17077 report it
Peter JK at 2014/04/30 11:26am
elfinder2 css conflict with bootstrap twitter

i still have no idea to fix elfinder2 css with bootstrap twitter, so the best version elfinder that works with BT is elFinder 1.2, that i use today..

#16970 report it
rob006 at 2014/04/17 05:51am
Re: create and extract archive

It should work out of the box, if you have enable proc_open() function in your hosting. You need just upload archive and you should be able to extract it.

#16966 report it
agus at 2014/04/16 09:27pm
create and extract archive

how to create and extract archive in elfinder ?

#16954 report it
agus at 2014/04/16 05:29am
can not create a new folder ?

Ok...successful...thanks very much

#16953 report it
rob006 at 2014/04/16 05:17am
Re: can not create a new folder ?

Try new release. I switched to elFinder 2.x branch, it should be more stable.

#16951 report it
agus at 2014/04/16 03:26am
can not create a new folder ?

elfinder can not create a new folder ?

Leave a comment

Please to leave your comment.

Create extension