Using the new elFinder File Manager

Version 2.3.0 includes a new modern File Manager which (in the long run) will make it much easier to manage and work with uploaded files.  In general, elFinder follows an 'operating system' paradigm, so it should be fairly logical to begin using, but it is much different than the old Exponent File Manager.elFinder File Manager

Some of the (new) elFinder features include:

  • True file folders for easier file organization
  • Drag and Drop file upload and moving (CAUTION: while you can move a file, it may break any references within WYSIWYG text since they are embedded as hard reference links instead of as an expFile object)
  • File cut/copy/paste
  • Single 'pane' file management and upload, instead of the old separate file uploader
  • Command toolbar to access most actions directly
  • ​Item option (context) menus
  • 'Touch' enabled to work with mobile devices
  • Integrated file archive creation and extraction (not available on windows servers)
  • Icon and details folder views

To enable the new elFinder file manager, open ''Configure Website' from the Exponent menu.  Then select the 'File Manger' tab and select 'elFinder' as the system file manager.  For the time being, the elFinder file manager is only an option and not the default file manager.

How to use these new features:

  1. Basic Window Layout
    • As with most modern file mangers there are three basic areas or panes in the elFinder window
      • Toolbar - is located at the top of the window
      • Folder Tree Pane - is located to the left side of the window.  The folder hierarchy can be collapse or expanded and the pane width may be adjusted
      • File Pane - this is the largest area of the window which displays all the file in the current folder or those matching a search request
    • elFinder also uses context menus which appear on folders, files, or the File Pane background
  2. File Uploads
    • ​​The easiest way to upload files into the file manager is to simply drag them from your PC desktop/file manager and drop them on/into the folder you choose.
    • You may also click on the 'Select files to upload' toolbar button, or choose the 'Upload files' context menu item from the file pane.  This will present a window to drag/drop files, to paste a file, or open a file select dialog to choose the files to upload.
  3. File Selection
    • The easiest way to select a file when the file manager is opened from within an editor or edit item dialog, is to simply double-click the file.
    • You may also click on the 'Select files' toolbar button, or choose 'Select' from the context menu for the file(s)
    • You may select more than one file by using the control/shift method or a drag box.
  4. File Operations/Management
    • You may cut, copy, paste, duplicate, rename, delete, or preview a file using the appropriate toolbar button or context menu item
    • You can display the files in the file pane as either large icons or a detailed list
    • You can sort the displayed files by name, size, kind, and date, in ascending or descending order
  5. Image Editing
    • elFinder includes integrated image resizing, cropping, and rotation using the 'Resize & Rotate' command
    • For more advanced editing, we now use an online service called Pixlr to provide full graphics editing features.  
    • As is the case with all commands, you can use the toolbar button or the context menu which will present you with a dialog to select either the full-blown Pixlr editor or Pixlr Express which has fewer features.
  6. Exponent File Management
    • The options to change file sharing, image title, image 'alt' title are now found in the 'Info' dialog of the file which can be displayed via toolbar or context menu
    • The 'sharing' status is changed instantly, but the 'title' and 'alt title' require you click on the 'update' button for the change to take place
    • You'll also see additional details such as file type, size, dimensions, file owner, etc...
    • There are also details about the file/folder found in the 'status' bar at the bottom of the window
    • There is also a 'Preview' command available to display/play images, videos, & mp3 files
  7. File Search
    • There is a built-in search feature using the input box in the toolbar.  Simply enter the phrase, press 'enter' and all the files in the system matching that phrase will be displayed, regardless of their folder location.
    • Click on the 'x' button or select a folder in the folder tree pane to clear the search.
  8. Transfer (back) to the Insert/Modify Link Dialog
    • If you are inserting a 'link' to a page into an editor instead of a link to a file, you can switch to the dialog with a list of pages available, the option to select a module on a page, or to switch back to the file manager.  This button is found on the toolbar to allow you to switch back to the Insert/Modify Link window.  It is located next to the toolbar 'Help' button.

Overall, we think you'll be pleased with the new elFinder File Manager and find it much simpler to use.

 

About the author

Dave Leffler
Exponent CMS Developer

Comments

  • Akis Giannopoulos said on July 6, 2016

    Hello,

    I'm using elfinder and I really think it's a great application. I've only got a small issue and I would really be very grateful if you could help me. I'd like the default view to be a list instead of icons. I've already tried defaultView : ['list'], and defaultView : 'list' but it doesn't seem to work. I really can't understand what I'm doing wrong. I would appreciate your help. 

    Here's the script:

     

        [removed]    
            $().ready(function() {
                var elf = $('#elfinder').elfinder({
                    url: 'php/connector.php',  // connector URL (REQUIRED)
                    lang: 'en',             // language (OPTIONAL)
                    cssClass: 'explorer',
                    height: 550,            
                    uiOptions: {
                        toolbar : [
                            // toolbar configuration
                            ['open'],
                            ['back', 'forward'],
                            ['reload'],
                            ['home', 'up'],                       
                            ['info'],
                            ['extract', 'archive'],
                            ['view'],
                            ['download'],
                            ['search'],
                        ]
                    },    
                    cookie : {
                      expires : 30,
                      domain  : '',
                      path    : '/',
                      secure  : false
                    },                
                    defaultView : ['list'],
                    sortType : ['name'],
                    sortOrder : ['asc'],                
                    contextmenu : {
                        // current directory menu
                        cwd    : ['reload', 'back', '|', 'paste', '|', ],
                        
                        files  : [
                            'getfile', '|','open', 'quicklook', '|', 'download'
                        ],
                    },
                }).elfinder("instance");
            });
        [removed]

  • David Leffler said on July 6, 2016

    If you are using elFinder with Exponent CMS, the method to do this is within the Site Configuration settings, File Manager tab, and un-checking the 'Show Image Thumbnails?' setting.

    However, if you are simply asking a general question about implementation of elFinder within another application, some of your entries above are enclosed within brackets which turns them into arrays, whereas they are meant to simply be a string.

                    defaultView : 'list',
                    sortType : 'name',
                    sortOrder : 'asc',   

Leave a comment

Fill out the above security question to submit your form.