Configuring File Manager

As a complex widget, File Manager consists of many stand-alone Webix views with its own API.
You can redefine inner views and also you can work with the specific File Manager settings.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

id (string, number) - the ID of a widget;
url (string) - the URL for loading data;
locale (object) - name of the language in use;
width (number) - widget width;
height (number) - widget height;
editor (boolean) - if false, the widget will not have the ability to edit text files. true by default;
player (boolean) - if false, the widget will not have the ability to play audio and video files. true by default;
compact (boolean) - compact mode. false by default;
compactWidth (number) - width of the widget, when it is switched to a compact mode. 640 by default.

Reactive Configuration

In addition, File Manager has specific reactive properties that store global app state and let developers track its changes:

mode (string) - set the currently/initially visible tab. Possible values are "grid" (default), "cards" and "double";
path (string) - sets the currently/initially opened folder;
selectedItem (array) - stores array of selected items (objects);
search (string) - stores text from the search input;
clipboard (object) - stores clipboard data: file object (array) and the mode for pasting ("cut" or "copy"), e.g. { files:[{id: "/hello.txt", size: 0, type: "code", value: "hello.txt"}], mode:"copy" }.

Only path and mode properties can be set initially.

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view:"filemanager", id:"fm",
    mode:"cards"
});
 
var state = $$("fm").getState();
/*
{
    mode:"cards", path:"/Docs/Test files",
    selectedItem:[ ], search:"", clipboard: {files: [{...}], mode: "copy"}
}
*/

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
  view:"filemanager",
  on: {
    onInit: app => {
      const state = app.getState();
 
      //log path and selectedItem
      state.$observe("path", v => $$("path").setValue(v));
      state.$observe("selectedItem", v =>
        $$("files").setValue(v.map(a => a.id).join(", "))
      );
    },
  }
});

In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.