elFinder 2.0 beta. Don't panic!

“For many civilizations of the Eastern Curl of the Galaxy, not so ceremonious, elFinder successfully replaced other web file managers and became generally accepted, because, although there are rare bugs in it, it has two big advantages.
First, it is cheaper;
and secondly, it has a big red button, on which big fun ones
The letters written friendly advice: Don't panic! "

Today is my really happy day!
A few months of extremely tense, but incredibly enjoyable work behind.
And I am pleased to introduce - 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.
To the studio colleagues — thank you for taking the time to free me for this project.
And I want to introduce a new developer elFinder - 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 has not been integrated. By the way, one of the first to do this was RBC Soft.
')

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 major flaws,
which cannot be corrected by refactoring / adding - low performance and the lack of a full API.
That is why elFinder was rewritten from scratch.
As an inevitable consequence - the data transfer protocol was updated.
But the new client works without problems with old connectors.

Let's see what we got.

Performance

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

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

Significantly reduced the size of json transmitted by the connector.
In the old version, the directory tree is transferred separately, the content of the current directory is displayed separately.
In the new - 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 “freezed” firefox for a few minutes (in 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 both repositories and 7000 folders.
Thanks to a colleague from the Czech Republic for the idea - why not add new elements to the DOM on demand, similar to how pictures are loaded in a google search?
An additional benefit - for thumbnails of images we appeal only when they are really necessary.

API

elFinder now has a full-fledged API not only for the client, but also for the server part.
Both are built on an event-driven model.
The server api has the ability to change data before sending it to the client, which can be useful, for example, for automatic renaming of files, resizing of loaded images, and so on.

And now - the most delicious

Multiroots + any types of data warehouses.
If 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 “driver”.
Connector architecture contains 3 layers.

1. Application layer Actually the elFinder class itself. “Mounts” root directories using “driver” objects.
   Translates client requests to driver-specific methods.
   
2. Abstract driver. Converts elFinder requests to storage references.
   He knows what data needs to be returned, but is completely unaware of how data is stored / retrieved.
   
3. Driver specific storage.
   In general, he knows nothing about anyone, can only perform simple operations with data.
   

Thus, to add support for a new type of storage, it suffices to write a fairly simple class that implements the basic operations with the "files".

At the moment there are 2 drivers

• for local file system
• to store files in mysql.
  Although this driver is quite workable (with some exceptions), I do not think that this way of storing data is suitable for production. It was written mainly to test the concept.
  

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

Search.
elFinder became a real filer :)
Search is carried out in all folders. Restrict the search to specific folders is not yet possible.

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

Sort files.
All sorting takes place on the client. 6 types of sorting are possible - by name / type / size and the same with folders at the beginning. Configurable in the config, but it is possible to make a button to change the sorting on the fly.

New file attributes.

• "Locked" - came to replace the attribute "rm", prohibiting removal. Similar to the attribute in macos - prohibits the deletion and renaming of the file.
• “Hidden” - makes the file invisible. Does not prohibit write / delete.

File Access Control.
In the previous version there was only one way - the description of rules based on regexp from the path to the file.
With the advent of new types of storage it becomes insufficient.
For example, for a file in the database by (id) there will be a number and then a lot of problems arise.
We still believe that authorization / access rights, etc. are not within the competence of the file manager itself. It must receive the correct options and this is enough to realize any accessibility features. Therefore, we added the ability to pass a function or object / method during initialization, which will “interpret” the 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 it so that when files are loaded / moved to the folder where files with such names exist, new files will be saved with a suffix added to their names.

File operations no longer block the user interface.
Thinking how to make the elFinder interface possibly more similar to the desktop file manager interface,
we encroached on the most holy for the web 2,3,4.0 - we killed Ajax spinners and overlay :)
Throw a dozen files in the download, but while they are loaded - rename the file and create a couple of new folders.
If communication with the server for a specific operation lasts longer than the set period of time (by default, it is half a second), you will see a notification window about what it is doing now.
I repent, I heard, the spinners did not kill at all, but only creatively reworked, shoved into the notification windows.
And the overlay survived, but only in a cameo role, and even transparent all - who will notice it?

Drag & drop everywhere.
Now you can copy / move files to / from the directory tree. If you drag a file to a folder in the tree and linger for a while, it will helpfully unfold, giving you the opportunity to drop the file into its subfolders.
Downloading 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.

Select files.
In the mode of displaying the current directory as icons, the up / down arrows work, as is expected of them (and with the shift pressed too).

View files.
Our favorite quicklook also received updates:

• icons for moving to the trace / pre file.
• full screen mode
• viewing audio / video through html5

"Properties" dialog.
For a group of files, shows one window with summary information. It 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 the file URL, the callback returns an object with all the file properties, including the image size.
It can also return information about several files and directories.

Context menu in the directory tree.

Improved support for symlinks.
Directory links are displayed in the tree.

Improved support for mime types
When defining the “internal” types, the mimes.type file from Linux is used.

Settings for generating thumbnails.
You can specify whether or not to make a crop and 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.

Decreased 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 a theme.css file, which, complete with the theme “smoothness”, makes elFinnder as similar to finder macos as possible.

RTL support
For us, it is not relevant, but users from countries where they write from right to left, I hope, will appreciate.
Support is still experimental, a colleague from Syria is testing it.

Small fly in the ointment
The minimum required jquery version 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 to work with several connectors on different servers at once.
• a connector and possibly a client proxy to work with webdav.

Perhaps some of these new extensions will already be commercial.
In any case, commercial extensions for elFinder will appear.
At once I will make a reservation that all the functionality that is now will remain free.
Commercial will be features that not everyone needs.
Now there is one such extension for viewing audio / video not supported by html5 using flash.
Perhaps there will still be extensions to highlight the code when editing files.
I hope the community will treat with understanding and support us.

Afterword

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

"Based on" the work on this project, I wrote a couple of articles,
But, perhaps, there are still some aspects about which you would like to know in more detail - 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 this is only beta - the bugs there just have to be there and we really need bug reports about them.
Up 3 Assembled build without source code - here