File Manager Structure

File Manager Layout

File Manager consists of several Webix views.

The main layout includes two rows: a row with a toolbar and the second row with a sublayout that contains Tree and mode views. Thus, the structure of File Manager is:

The layout of File Manager is rather flexible. It means that you can customize it according to your preferences.

For example, if you want to swap one toolbar element with another one or even to remove it, the functionality of File Manager will remain untouched.

You can find more information concerning the possibilities of customizing File Manager views in the article File Manager General How-Tos.

Toolbar

Toolbar is based on Webix Toolbar view.

{
    id:         "toolbar",
    css:        "webix_fmanager_toolbar",
    paddingX:   10,
    paddingY:   5,
    margin:     7,
    cols:[
       // buttons 
    ]
}

You can use the $$("toolbar") method to refer to its object:

var toolbar = $$("fmanager").$$("toolbar");

The Menu button is based on Webix Button control. It is used to activate the Actions menu.

{ 
   id:      "menu",
   view:    "button", 
   type:    "htmlbutton", 
   css:     "webix_fmanager_menu", 
   label:   "<div class='webix_fmanager_bar_icon'></div>",
   width:   37,
   tooltip: webix.i18n.filemanager.actions
}

You can get the reference to its object in the following way:

var menu = $$("fmanager").$$("menu");

Spacer

The spacer is used to separate buttons.

{
    id:     "menuSpacer", 
    width:  75
}

To refer to its object use the $$("menuSpacer") method:

var spacer = $$("fmanager").$$("menuSpacer");

Back and Forward buttons

The Back and Forward buttons are based on Webix Button. They let move back and forward through the navigation history.

//the Back button
{   
    id:      "back",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_back",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   37,
    tooltip: webix.i18n.filemanager.back
}
 
//the Forward button
{ 
    id:     "forward",
    view:   "button", 
    type:   "htmlbutton", 
    css:    "webix_fmanager_forward",
    label:  "<div class='webix_fmanager_bar_icon'></div>", 
    width:  37,
    tooltip: webix.i18n.filemanager.forward
}

To refer to the object of the buttons, use the $$("back") and $$("forward") buttons, respectively:

//for the Back button
var bback = $$("fmanager").$$("back");
 
//for the Forward button
var bforward = $$("fmanager").$$("forward");

LevelUp button

The Level Up button is based on Webix Button. It selects the parent folder of the selected item (file/folder):

{
    id:      "up",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_up",
    label:   "<div class=\"webix_fmanager_bar_icon \"></div>", 
    width:   37,
    tooltip: webix.i18n.filemanager.levelUp
}

You can get the reference to its object in the following way:

var levelUp = $$("fmanager").$$("up");

Path view

The Path view displays the path to the currently selected item (file/folder).

{ 
    id: "path"
    view: "path", 
    borderless: true
}

To refer to its object use the $$("path") method:

var path = $$("fmanager").$$("path");

The Search element is based on Webix Search control and allows searching for files and folders, the names of which contain the entered letter combinations:

{ 
    id:       "search", 
    view:     "search", 
    gravity:  0.3, 
    minWidth: 80, 
    css:      "webix_fmanager_search", 
    icon:     "webix_fmanager_icon" 
}

You can use the $$("search") method to refer to its object:

var search = $$("fmanager").$$("search");

Modes button

The Modes button presents a segmented button, based on Webix Segmented Button control. It lets switch between two modes of displaying folders and files: "Files" and "Table".

{ 
    id:      "modes", 
    view:    "segmented",
    width:   70,
    value:   settings.mode,
    css:     "webix_fmanager_modes",
    options: [
      // options
    ]
}

The options are specified as an array:

[
  {
    id: "files",
    width: 32,
    value: "<div class='webix_fmanager_bar_icon webix_fmanager_files_mode'></div>"
  },
  {
    id: "table",
    width: 32,
    value: "<div class='webix_fmanager_bar_icon webix_fmanager_table_mode'></div>"
  }
]

To refer to its object use the $$("modes") method:

var modes = $$("fmanager").$$("modes");

bodyLayout

bodyLayout includes 3 columns: a layout with Tree, Resizer view and a column with "Files" and "Tree" view modes.

treeLayout

treeLayout includes a treeToolbar and Tree.

treeToolbar

treeToolbar includes 4 elements: the hideTree button, the spacer, the expandAll and collapseAll buttons:

hideTree button

The hideTree button hides/shows the Tree panel.

{ 
   id:      "hideTree",
   view:    "button", 
   type:    "htmlbutton", 
   css:     "webix_fmanager_toggle",
   label:   "<div class="webix_fmanager_bar_icon"></div>", 
   width:   30,
   tooltip: webix.i18n.filemanager.hideTree
}

expandAll button

The expandAll button expands the collapsed Tree.

{ 
    id:      "expandAll",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_expand",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   30,
    tooltip: webix.i18n.filemanager.expandTree
}

collapseAll button

The collapseAll button collapses the Tree remaining just the root folder visible.

{ 
    id:      "collapseAll",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_collapse",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   30,
    tooltip: webix.i18n.filemanager.collapseTree
}

Tree

The Tree is based on Webix Tree. It displays the hierarchy of folders and allows navigating through them.

{
    id: "tree",
    width: 230,
    view: "filetree",
    select: true,
    filterMode:{
        showSubItems:false,
        openParents:false
    },
    type: "FileTree",
    // mouse navigation
    navigation: true,
    scroll: true,
    // editing options
    editor:"text",
    editable: true,
    // disable editing on double-click
    editaction: false,
    // drag-n-drop
    drag: true,
    // tab 'key' navigation
    tabFocus: true,
    // context menu
    onContext:{}
}

Tree uses "FileTree" data type that configures folder icons for nodes:

webix.type(webix.ui.tree,{
    name: "FileTree",
    folder: function(obj, common){
        if (obj.icon)
            return "<div class='webix_icon icon fa-folder'></div>";
        if (obj.$count && obj.open)
            return "<div class='webix_icon icon fa-folder-open'></div>";
        return "<div class='webix_icon icon fa-folder'></div>";
    }
});

You can get the reference to tree object in the following way:

var tree = $$("fmanager").$$("tree");

Resizer view

Resizer is a draggable border between the Tree and the File views. It is based on Webix Resizer.

{
    view:"resizer", 
    width:2
}

View modes

These are 2 modes of viewing files of the selected folder: "Files" and "Table". By default, the "Table" mode is active.

Files mode

"Files" mode is based on Webix DataView.

{
    id: "files",
    view: "fileview",
    type: "FileView",
    select: "multiselect",
    // editing options
    editable:true,
    editor:"text",
    editValue:"value",
    // disable editing on double-click
    editaction: false,
    // drag-n-drop
    drag: true,
    // mouse navigation
    navigation: true,
    // tab 'key' navigation
    tabFocus: true,
    // context menu
    onContext:{}
}

"Table" mode is based on Webix DataTable component.

{
    id: "table",
    view: "filetable",
    css: "webix_fmanager_list",
    columns: "columns",
    // editing options
    editable: true,
    // disable editing on double-click
    editaction: false,
    select: "multiselect",
    // drag-n-drop
    drag: true,
    // mouse navigation
    navigation: true,
    resizeColumn:true,
    // tab 'key' navigation
    tabFocus: true,
    // context menu
    onContext:{}        
}

Actions Menu

The Actions menu displays actions that can be applied to selected files or folders. It appears by clicking the Menu button or by clicking the right mouse button:

The Actions menu is based on Webix ContextMenu. That's why you can operate its items via TreeStore API.

To refer to the Actions menu, you can apply the getMenu() method to File Manager:

var actions = $$("fmanager").getMenu();

By default, the Actions menu contains the following data array:

[
    {
        id: "copy", 
        method: "markCopy",  
        icon: "copy", 
        batch:"item",
        value: webix.i18n.filemanager.copy // "Copy"
    },
    {
        id: "cut", 
        method: "markCut", 
        icon: "cut", 
        batch:"item",
        value: webix.i18n.filemanager.cut // "Cut"
    },
    {
        id: "paste", 
        method: "pasteFile", 
        icon: "paste", 
        value: webix.i18n.filemanager.paste // "Paste"
    },
    {   $template:"Separator" },
    {
        id: "create", 
        method: "createFolder", 
        icon: "folder-o", 
        value: webix.i18n.filemanager.create // "Create Folder"
    },
    {
        id: "remove", 
        method: "deleteFile", 
        icon: "times", 
        batch:"item",
        value: webix.i18n.filemanager.delete // "Delete"
    },
    {
        id: "edit", 
        method: "editFile",  
        icon: "edit", 
        batch:"item",
        value: webix.i18n.filemanager.rename // "Rename"
    },
    {
        id: "upload", 
        method: "uploadFile", 
        icon: "upload", 
        value: webix.i18n.filemanager.upload  // "Upload"
    }
]

The properties of actions are the following:

  • id - {string} the id of an action
  • method - {string} the name of the method that is used to implement the action
  • icon - {string} an icon from the Font Awesome collection used for the action
  • batch - {string} group that menu item belongs to. Possible value are:
    • "item" - the item will be seen only for data items not empty space;
    • "root" - the item will be seen for the root item only;
    • "folder" - the item will be shown for folders only;
    • "file" - the item will be shown for files only;
    • "empty" - the item will be shown for empty space and all items other than root
  • value - {string} the action title
  • $template - {string} optional, the $template:"Separator" settings draws a separating line

You can reload data using the following approach:

var actions = $$("fmanager").getMenu();
actions.clearAll();
var newData = [{id: "copy", ...},...];
actions.parse(newData);

Adding a new action to the menu

The add method allows adding a new action to menu:

actions.add({id: "myAction", icon: "file", value: "My Action"});

For instance, you can add the initial "download" option when Filemanager is ready:

view:"filemanager",
ready:function(){
    this.getMenu().add({
        id: "download",
        icon: "webix_icon fa-download",
        value: "Download",
        batch: "file"
}, 0);

Related sample:  Custom menu buttons

On clicking any menu item, Filemanager method defined by action.method or action.id is called.

In the above snippet, Filemanager download is called. If there isn't any method in Filemanager to match id or method of your custom item, you will need to add it to the component prototype.

Setting a click handler for the new action

It is possible to set a click handler for the added action using onItemClick event handler:

actions.attachEvent("onItemClick", function(id){
   if(id == "myAction"){
       // some code here
   }
});

Removing an action

To remove an existing action, you can call the remove method for it:

actions.remove("upload");

Customizing the Actions menu

It is possible to customize the Actions menu with the help of the menuFilter function that can filter menu items before showing a menu on the page.

view:"filemanager",
id: "fmanager",
menuFilter:function(obj){
    //obj - menu item obj
 
    var context = $$("fmanager").getMenu().getContext();
    //dataId - id of the clicked data item
    var dataId = context.id;
 
    if(..some condition ..)
        return false;
    return true;  
}

The function should return true to show the item, false to hide it.

Back to top
If you have not checked yet, be sure to visit site of our main product Webix ui component library
and page of web file manager product.