Writing backend connector for elFinder

Few months back I was looking to develop a web based file manager to use in my wireless file explorer android app which is when I stumbled upon elFinder. I was very happy to find such a feature rich front-end with BSD license. Immediately from it’s wiki, I learned of the architecture and also about the availability of a third party connector written in Java. I started integrating the Java servlet into my android project which turned out to be a tiresome effort. After spending a day trying to sort out the dependencies, I gave up on it and decided to write my own connector. Next few days I went back and forth between the idea of writing a connector for elFinder and building a simple file explorer from scratch. Fiddling with elFinder’s client server API page for some more time, I fired up my IDE and started coding up the connector. In this post, I will share how the backend was built and things I learned doing so.

How elFinder works

elFinder, as you know is the file manager that works in the browser. It communicates with the backend connector that does the actual file operations. There is a clearly defined client server API that the connector should implement inorder to compliment elFinder’s features.
Connector is configured to be reached on a particular URL which is configured in elFinder client. elFinder sends commands and options to the connector by appending as parameters to the connector URL. Connector will parse these parameters and take required action depending on the command sent and emit the result back to elFinder client as JSON.

For example, http://url?cmd=<cmd>&options=<options> will request connector to execute command cmd with given set of options.

Since all we will be dealing with are files, we must be extra cautious with the file paths. We should be using hash of the file paths to represent files and elFinder wiki suggests base64 encoding starting 2.0 API
When elFinder client is opened for the first time, it will send ‘init’ command to the connector which will respond back with client specific options, api version and list of files in the given directory among other things.

Connector:

On receiving a request from elFinder client, connector will parse the cmd attribute and calls corresponding method to act upon. And it is this method which will read the remaining arguments and spit the JSON output using file object and some helper methods.

elFinder connector architecture

File class: Instantiating this will return us the object to represent a file in the backend. Also has convenience methods for encoding and decoding the hashes to/from file paths among others.

A typical file operation:
Consider renaming a file: When user renames a file on the elFinder interface, it will send http://url?cmd=rename&target=<filehash>&name=<new_name> where filehash is the hash of the file that is being renamed and new_name is the name the file is being renamed to.

Router on parsing this url will call rename() method which will decode the file hash, rename the required file to new_name and will send JSON output with added and removed file hashes back to the router which will emit it to elFinder client.

{

added: <hash_of_filepath_after_renaming>,

removed: <hash_of_filepath_before_renaming>

}

There are methods to handle all the supported commands in the connector. Each method will work the same way as the rename command shown above.

Tip: Though elFinder’s client server API page in wiki is good enough to start writing connector, I used Chrome developer tools extensively to figure out the commands being used for some operations and the exact format in which the output needs to be emitted from the connector for the client to interpreted properly.

Using Chrome’s developer tools with the file manager on elFinder.org, I was able to finish up a functional connector that I could use in my android application. After customizing the interface to my needs, I shipped the app in the first week of this month. I thoroughly enjoyed creating the connector and hope to open source the code when it matures enough to be read by others ;-)

  • Pingback: 2012 year in review | ajhai's

  • Eric

    Hey
    Thanks for sharing your feedback with us.
    Could you please share the java connector code as well??
    It would be greatly appreciated!