elFinder 2.0 beta. Don't panic!

“For many civilizations of the Eastern Curl of the Galaxy, not so ceremonial, elFinder has successfully replaced other web file managers and has become generally accepted, because although it has rare bugs, it has two big advantages.
Firstly, it is cheaper;
and secondly, he has a big red button on which
friendly advice is written in big cheerful letters: Don't panic! »

Today is a truly happy day for me!
A few months of extremely intense, but incredibly enjoyable work behind.
And I am pleased to present - file manager for web elFinder 2.0 beta !

I want to express my deep gratitude to the whole community for their help, patches and translations.
Colleagues in the studio - thanks for taking all the trouble to free me for this project.
And I want to introduce a new elFinder developer - 667bdrm . He is the author of the module for drupal .
And yet, we are all very pleased that now there is practically no framework in which elFinder would not be integrated. By the way, RBC Soft was one of the first to do this.


Before proceeding to the description of the innovations I will explain why 2.0, and not the continuation of the 1.x branch.
The fact is that the 1.x branch has 2 big drawbacks
that cannot be fixed by refactoring / adding - low productivity and the lack of a full API.
That is why elFinder was rewritten from scratch.
As an inevitable consequence, the data transfer protocol has been updated.
But the new client works with old connectors without problems.

Let’s see what happened.

Performance

The directory tree is loaded on demand.
The nesting depth is configured in the config, by default one level is loaded.

Replacing the encoding of the file path from md5 to base64 + encryption - accelerated all file operations.
Of course, base64 is by no means a reliable way to hide the path to the file,
but the path relative to the root directory is encoded, which does not provide enough information about its real position.
Path encryption will be added in the future (for paranoid).

Significantly reduced json size transmitted by the connector.
In the old version, the directory tree is transferred separately, separately - the contents of the current directory.
In the new one, all data is transferred in one object without duplication, which saves about 30%.
Replacing boolean types with int also gave a considerable gain in size.

A large number of files is a problem not only for the server, but also for the client.
Creating a DOM with 2000 elements “froze” firefox for several minutes (for safari / chrome this threshold starts at 5000).
You can, of course, decide that this is a very rare case, but my experience says that there are companies that need to work with storages and 7000 folders.
Thanks to a colleague from the Czech Republic for the idea - why not add new elements to the DOM on demand, like the way images are loaded in google search?
An additional benefit - we apply for thumbnails only when they are really needed.

API

elFinder now has a full API not only for the client, but also for the server side.
Both are built on an event-driven model.
Server api has the ability to change data before sending it to the client, which can be useful, for example, for automatically renaming files, resizing downloaded images, etc.

And now - the most delicious

Multiroots + any type of data storage.
If in one sentence - elFinder supports any number of root directories and they can be not only folders on the file system.
Each root directory is "mounted" using its own "driver".
The architecture of the connector contains 3 layers.

1. Application layer. Actually the elFinder class itself. "Mounts" root directories using objects - "drivers".
   Translates client requests into methods of a specific driver.
   
2. Abstract driver. Converts elFinder requests to storage accesses.
   He knows what data needs to be returned, but is absolutely not aware of how data is stored / retrieved.
   
3. Specific storage driver.
   In general, he doesn’t know anything about anyone, he can only perform simple data operations.
   

Thus, to add support for a new type of storage, it’s enough to write a fairly simple class that implements basic operations with “files”.

Currently there are 2 drivers

• for local file system
• to store files in mysql.
  Although this driver is quite functional (with some exceptions), I don’t think that this method of data storage is suitable for production. It was written mainly to verify the concept.
  

To finally take the cap off, I’ll add that the client is no longer tied to jQuery.ajax as the only data transport.
That is, now you can implement communication with connectors located on different servers, use web sockets, etc.
And multiroots can be implemented in the same way.
You can also convert data to a format that is understandable to the client side of elFinder.
This is how support for the protocol of old connectors is made.
And right now we are working on the implementation of a proxy for webdav / svn for one Swedish company.

Search.
elFinder has become a real finder :)
Search is carried out in all folders. There is no way to limit the search to specific folders yet.

Filter by file type.
It is enough to specify a list of file types in the settings and the user will see only them.

Sort files.
All sorting occurs on the client. There are 6 types of sorting possible - by name / type / size and the same with folders at the beginning. It is configured in the config, but it is also possible to make a button for changing sorting on the fly.

New file attributes.

• "Locked" - replaced the "rm" attribute, which prohibits deletion. By analogy, an attribute in macos - prohibits deleting and renaming a file.
• "Hidden" - makes the file invisible. Does not prohibit writing / deleting.

File Access Control.
In the previous version, there was only one way - the description of rules based on regexps from the path to the file.
With the advent of new types of storage, this is not enough.
For example, for a file in the database by (id) there will be a number and here a lot of problems arise.
As before, we believe that authorization / access rights, etc., are not within the competence of the file manager itself. He must get the correct options and this is enough to realize any accessibility. Therefore, we added the ability to transfer a function or object / method during initialization, which will “interpret” access rights to a specific file.
For each root directory, you can use your own access control.

Control overwriting existing files.
It is possible to configure so that when loading / moving files to a folder where files with these names exist, new files will be saved with the suffix added to their names. File operations no longer block the user interface. Thinking how to make the elFinder interface as similar as possible to the desktop file manager interface, we encroached on the most sacred thing for the web 2,3,4.0 - we killed ajax spinners and overlay :) Drop a dozen files into the download, and while they are loading, rename the file and create a couple of new folders. If communication with the server for a specific operation lasts longer than a specified period of time (by default, half a second), you will see a notification window about what it is currently doing.






I confess, I was cunning, the spinners were not killed at all, but only creatively processed, they were pushed into the notification windows.
And the overlay survived, but only in an episodic role, and even the whole transparent - who will notice it?

Drag & drop everywhere.
You can now copy / move files to / from the directory tree. If you drag a file onto a folder in the tree and linger for a while, it will helpfully open, giving you the opportunity to drop the file into its subfolders.
Download from drag & drop - just drop the file into the current directory (if your browser supports it).
The view of the group of portable files has become more compact.

File selection.
In the display mode of the current directory as icons, the up / down arrows work, as it is expected from them (and with the shift pressed too). View files.


Our favorite quicklook also received updates:

• Icons for moving to the next / previous file.
• full screen mode
• view audio / video via html5

Dialog "Properties".
For a group of files, it shows one window with summary information. Also shows the size of the folder / group of files.

Reaction to pressing the enter key, depending on the operating system.
For macos - rename the file, for the rest - open the file / folder.

Work in conjunction with wysiwyg editors, etc.
Instead of a file URL, a callback returns an object with all the properties of the file, including the size of the picture.
It can also return information about several files and directories.

The context menu in the directory tree. Improved symlinks support. Directory links are displayed in the tree. Improved support for mime types





The method for determining the types of "internal" uses the mimes.type file from Linux.

Preview generation settings.
You can specify whether or not to crop and the background color.

Integration into other systems.
The elFinder class is implemented as a library for inclusion in other software products.

The ability to transfer additional data when accessing the connector.
Used to transfer tokens, etc. in many frameworks.

Reduced dependency on jquery UI components.
Now only selectable / draggable / droppable is needed. Resizable - optional.

Theme roller suport.
The appearance of elFinder depends entirely on the current jquery UI theme.
The distribution includes the theme.css file, which, complete with the theme “smoothness”, makes elFinnder as similar as possible to finder macos.

RTL support
It’s not relevant for us, but users from countries where they write from right to left will hopefully appreciate it.
Support is still experimental, a colleague from Syria is testing it.

A small fly in the ointment
The minimum required version of jquery is 1.6.1. I understand that not everyone can update jquery so easily in their projects, but we are looking to the future and $ .Deferred is our everything :)

Future plans

• plugin for drupal allows you to work with a database of files. As far as I know - soon.
• client proxy for working with multiple connectors on different servers at once.
• connector and possibly client proxy for working with webdav.

Perhaps some of these new extensions will already be commercial.
In any case, commercial extensions for elFinder will appear.
Immediately make a reservation that all the functionality that is now - will remain free.
Commercial will be functions that not everyone needs.
Now there is already one such extension for viewing audio / video of unsupported html5 using flash.
Perhaps there will still be extensions for highlighting the code when editing files.
I hope the community will be sympathetic and support us.

Afterword

The big red button with which the article began is not a useless decoration at all - this is a link to our support forum.

“Based on” the work on this project, I wrote a couple of articles,
but maybe there are still some aspects that you would like to learn more about - ask.

That's all. Thank you for your attention and do not forget your towel :)

Project on github

Up A small request - please do not swear in the demo
Up 2 Do not forget that these are only beta - bugs there must be there and we really need bug reports about them.
Up 3 Build the build without source - here