Webix File Manager. A worthy web counterpart of a desktop application

The tendencies of recent years show that the age of desktop apps, in their classical sense, is running out. Just as at one time floppies were superseded by CD/DVDs, and the last ones were replaced by flashcards and cloud technologies, so the desktop programs will gradually be replaced by their more modern and practical web counterparts.

If you develop your own web application that implies working with files, then you will need a good file manager. And here you have to decide between two reasonable options:

• either create a widget from scratch, which in any case will require a lot of your time and resources
• or use a ready-made solution and just integrate it.

In this article, the proponents of the first option, for whom the development of an effective file system is not a difficult task, may familiarize themselves with an unconventional solution to the issue by other developers.

The adherents of the second option, for whom the efficiency and result are more precious than the thorny path of achieving it, will open up for themselves a very useful and flexible tool. Further, we will talk about a complex widget for managing files from the Webix team. Let's see what they offer to us.

What is Webix File Manager

Webix File Manager is a JavaScript file system management solution. The widget is based on the components of the Webix UI library and the Webix Jet microframework. Besides the interface for working with file systems, it includes the ready-made Node JS and Golang backend solutions, as well as a service for previewing text files and pictures. For such a significant bonus, we can give the widget a big plus.

The File Manager functionality is not inferior to the related desktop app. In particular, the widget allows you to do the following:

• create new files/folders
• upload local files
• download files
• edit text files using a special editor
• play audio and video files using a built-in player
• move, sort, rename, cut, paste, copy and delete files/folders.

The above-mentioned functionality is implemented through the convenient and stylish interface that displays the structure of files and folders received from the server. Visually the widget consist of 3 parts:

• Toolbar
• Left panel
• Right panel.

The left panel of the application displays the main directory tree. Here you can look through the tree structure of folders, as well as create or upload new folders and files using the button at the very top of the panel.

If you select any folder in the directory tree, its content will be displayed on the right panel. There you can work with files and folders via the context menu, sort and move them, play audio and video files, edit text files, as well as navigate through the directory tree using the navigation bar. Besides, you can establish a convenient display mode.

It is worth noting here that the widget allows you to display the folder content as a table and cards. But if you're feeling nostalgic for the classic Total Commander interface, you can use the special old-school mode, which splits the right panel into two separate parts. This is very comfortable when you need to work with two directories at the same time. There are corresponding buttons on the Toolbar to switch between these display modes.

Among other things, you can search for the items you need via the search bar and apply a preview mode of a specific file using the related control. Both of them are also on the Toolbar.

But the most important thing is that you can customize the basic functionality and interface, change it, add your own, or remove those features and components that are not needed. We can give the widget one more point for its flexibility and customization.

How to Create the Widget with Basic Functionality

Like other complex widgets, File Manager is an advanced extension of the Webix UI library. It is distributed with the Pro version of the library but is not included in it. The component can be purchased as a part of one of the license packages.

But you can download the trial Pro version with all complex widgets and use it for free for 30 days. This will allow you to try in practice all the advantages and flexibility of working with the File Manager and decide whether it suits you or not. As for me, that is a rhetorical question.

Since the File Manager is a library extension, for using it you need first connect the Webix resources. After the library is connected, you have to specify the corresponding .js and .css files of the widget itself.

<head>
  <!-- Webix Library -->
  <script src="codebase/webix.js" type="text/javascript"></script>
  <link rel="stylesheet" href="codebase/webix.css" type="text/css">

  <!-- File Manager Widget -->
  <script type="text/javascript" src="codebase/filemanager.js"></script>
  <link rel="stylesheet" href="codebase/filemanager.css" type="text/css">
</head>

Next, you should call the widget' constructor wrapped into the webix.ready(…) method, to start executing the code only after the page is fully loaded.

<body>
    <script>
      webix.ready(function(){
        <!-- File Manager Constructor -->
         webix.ui({
            view:"filemanager", url:"some_backend"
         });
       });
   </script>
</body>

As you can see, to connect the file manager all you need to do is write a few lines of code. Now you can manage the files and folders via the user-friendly interface.

How to Configure the Widget

File Manager is a complex widget. It is like a constructor that consists of many separate Webix components. Each of them has its own API, with which you can set its view and behavior. In addition to the nested component settings, the widget includes its own configuration.

It is worth clarifying here that for configuring the widget plain and convenient JSON syntax is used. All you need to do is to specify the necessary values for the related properties.

When configuring the app, you need to provide a link to the server script (your own or built-in), to load the data for visualizing the file system. For this, the widget has the url property. It is worth noting here that the widget won't download all the data at once, but only the main directory and the initially opened folder. The content of other directories will be loaded as needed (upon opening) and cached.

{
  view:"filemanager", 
  url:"your_backend" // your server script
}

If you do not need to edit text files and play audio/video files, you can just disable the built-in editor and player. For this, you have to use the corresponding editor and player properties.

{
  view:"filemanager", 
  url:"your_backend", 
  editor:false, // disable built-in editor
  player:false // disable built-in player
}

By default, files and folders are displayed as a table. But you can display the current folder content as cards using the mode property.

{
  view:"filemanager", 
  url:"your_backend", 
  id:"fm", // ID for access the widget
  mode:"cards" // default display mode
}

Besides the main parameters, the widget has reactive properties. They store the application state and allow changing it dynamically. Here are some of them:

• mode (string) - stores the current display mode
• path (string) - stores the path to the currently open folder.

For working with app state the library provides the getState() method. With its help, you can get an object with reactive properties and change its values if needed.

// returns an object with the current state of the File manager
const state = $$("fm").getState();

Now you can change the default “cards” mode to the “grid” mode for displaying the files and folders as a table.

// switch the widget to the "grid" mode
state.mode = "grid";

Now you know how to configure the widget and manage its state.

How to Localize the Widget

Localization is a nice bonus provided by the file manager. By default, all widget labels are displayed in English. But you can easily add your own and switch between them if needed.

To translate labels into the desired language, you can create your own locale and specify the necessary translations inside of its object.

fileManager.locales.custom_ru = {
    Files:"Files",
    "Add New":"Add new",
    "My Files":"My files",
    ...
};

When the custom locale is ready, you can apply it to the entire application. For this, you need to use the locale property. In the object of this property, you can set your locale value to the lang property.

webix.ui ({
    view:"filemanager",
    url:"your_backend",
    locale:{
      lang:"custom_ru"
    }
});

But that's not all. You can also create several locales and switch between them dynamically. To do this, you need to access the built-in locale service using the getService() method, and call the setLang() method for it. The method takes the name of the required locale as a parameter.

const locale = $$("fm").getService("locale");
locale.setLang(/* desired locale */); // ru, en, ua …

That's all the magic. It should be borne in mind that Webix developers don’t provide ready-made files with locales. But the library has a special platform where users can share their locales. These translations can be found on the webix-hub page.

You can also share your work by pushing it to the related repository on this platform. And we can give the widget one more huge plus for the localization and its simplicity.

How to Customize File Manager

If you are not quite satisfied with the abilities of the basic setting, you can customize the widget on your own (change some part of the interface or add/remove any functionality). But for this, you need to understand how the app code works.

The widget structure is built as an SPA application based on the MV* pattern of the Webix Jet framework. The app interface (View) is separated from its business logic (Model). Each element of the interface is an independent component of the Webix library (button, datatable, toolbar, and others). Significant parts of the interface (toolbar, left panel, and others), consisting of the components mentioned above, are stored in the separated classes inherited from the JetView class. And the logic (model) is also stored separately in classes named “services”.

To change the widget interface and functionality, you have to be ready to dig a little in its code. And for this, you should understand at least the main aspects of working with the Webix Jet framework. If you are familiar with JavaScript, you won’t have much difficulty.

Read the "Webix Jet framework through the eyes of a freshman" article to find out the basic principles of working with the framework or refer to the documentation for more detailed information.

Since you will need to learn a new framework, we can give the widget a small minus for this little complication. But in any case, such knowledge will not be superfluous and only expand the range of your competencies.

The Interface Customization

Now let's get down to practice. As I mentioned above, each element of the interface is an independent component, and each significant part of the interface is a separate class consisting of these components. With this in mind, you can easily set, customize, add new, or even remove that part of the interface (or its component) you don’t need.

Let's say you want to remove the buttons for switching display modes placed on the Toolbar.

First, you need to create a new class by inheriting it from the class that stores the toolbar interface. Then, you should hide the buttons using the hide() method. It should be borne in mind here that the developers don’t recommend removing "unnecessary" components. They can be related to the internal logic of the app and their removal may lead to the error.

All manipulations with the interface need to be done inside the init() method. It is inherited from the JetView class and is responsible for displaying items when initializing.

class CustomTopBar extends fileManager.views.topbar {
  init(){
    // default logic
    super.init();
    // removing a component can lead to the errors
    // hiding a component is more safety
    this.$$("modes").hide();
  }
}

Next, you need to replace the parent class you inherited from with a new one instead. This can be done using the override property in the widget constructor:

{
    view:"filemanager",
    ...,
    mode:"cards", // display mode by default
    override:new Map([[fileManager.views.topbar, CustomTopBar]])
}

This is how you can change the widget interface. In my opinion, there is nothing supernatural here.

The Logic Customization

The Webix Jet services are separate classes, which consist of methods for controlling the widget logic. Unlike the View classes of the interface, the service methods are available for the entire application. Such a method can be called both by the interface itself and by other services. You can customize any service by changing its methods or adding new ones.

Let's assume that you have your own server-side logic, where the URL and API for working with data are different from the built-in ones. In this case, you need to make some changes to a special Backend service.

By default, the request for uploading files of the selected folder includes the files segment and looks like this:

https://docs.webix.com/filemanager-backend/files?Id=%2FNewFolder

The value of the id parameter in the query string is the id of the folder in which you want to load the data.

But since you have your own backend, the segment may differ from the built-in one and will look something like this:

https://docs.webix.com/filemanager-backend/custom_segment?Id=%2FNewFolder

To change this segment, you should slightly modify the files() method of the Backend service.

First, you need to create a new class by inheriting it from the class of the Backend service. Then you should change the files() method by passing to it the desired segment.

class CustomBackendService extends filemanager.services.backend{
   files(id){
    id = id || "/";
    return this._files(this.url("custom_segment"), {id});
   }
}

After that, as in the case with the interface, you need to replace the parent class you inherited from with a new one. This can be done using the well-known override property in the widget constructor:

webix.ui({
    view:"filemanager",
    url:"your_backend",
    override:new Map([[filemanager.services.backend, CustomBackendService]])
});

Redefining the inner classes in this way, you can change the widget interface and logic on your own. You can find out more information with related samples on the how-to page.

Conclusion

In this article, I have introduced you to the File Manager widget and its main features. As you can see, it is a very flexible and functional component. You can set and customize it as well as integrate it into any framework or library you prefer.

It is also worth mentioning here that the widget is distributed along with the more advanced Document Manager solution. Both widgets are very similar in design and capabilities, but the latter one has several additional benefits. For example, the document manager allows you to do the following:

• comment on the documents
• mark the documents as favorites
• view the history of recently opened documents
• share the documents with others
• remove the documents to the trash.

If you prefer to use more advanced functionality, you can choose the Document Manager widget. But if this functionality is not required, you may give preference to the simplified File Manager widget. In any case, the final word is yours.