Localizing File Manager

By default, all labels in File Manager are defined in English, but you can provide custom translations for:

  • names of actions ("Open", "Delete", etc.)
  • column titles
  • date formats
  • labels on the buttons
  • labels no the folders

The File Manager widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

File Manager titles are stored in the following object:

export default {
    Email: "Email",
    Save: "Save",
    Rename: "Rename",
    Open: "Open",
    Edit: "Edit",
    Delete: "Delete",
    Folder: "Folder",
    "Add New": "Add New",
    "My Files": "My Files",
    Size: "Size",
    Date: "Date",
    "back to parent folder": "back to parent folder",
    "Please login": "Please login",
    Download: "Download",
    Type: "Type",
    Information: "Information",
    Remove: "Remove",
    Files: "Files",
    Table: "Table",
    Cards: "Cards",
    Total: "Total",
    "Are you sure ?": "Are you sure ?",
    Details: "Details",
    "Enter a new name": "Enter a new name",
    Add: "Add",
    "Select something": "Select something",
    "Download file": "Download file",
    Preview: "Preview",
    Refresh: "Refresh",
    "Are you sure you want to exit without saving?":
        "Are you sure you want to exit without saving?",
    Copy: "Copy",
    Cut: "Cut",
    Paste: "Paste",
};

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

  • Set custom translations by creating the needed locale (below it is "ru") within the fileManager.locales object:
// Russian translations
fileManager.locales.ru = {
    Files: "Файлы",
    "My Files": "Моя полка"
};
  • And define the current locale for File Manager. For these purposes, use the locale setting of the File Manager constructor:
webix.ready(function() {
    // use custom scrolls, optional
    if (!webix.env.touch && webix.env.scrollSize) webix.CustomScroll.init();
 
    const fm = {
        view: "filemanager",
        id: "fm1",
        url: "//demo-wfs-ls.webix.dev/",
        locale: {
            lang: "ru"
        }
    }
};

Related sample:  File Manager: Custom Locale

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

  • First, set custom translations to the desired labels:
fileManager.locales.ru = {  // Russian
    Files: "Файлы", "My Files": "Моя полка", ...
};
 
fileManager.locales.zh = {  // Chinese
    Files: "檔案", "My Files": "我的檔案", ...
};
  • Switch between languages using File Manager "locale" service and its setLang method:
{
    rows: [
        {
            view: "segmented", options: ["en", "ru", "zh"],
            click: function() {
                const locale = $$("fm1").getService("locale");
                locale.setLang(this.getValue()); // zh, ru or en
            }
        },
        { view:"filemanager", id:"fm1" }
    ]
}

Related sample:  File Manager: Switching Locales

How to Synchronize File Manager and Webix Locale

The built-in labels of Webix components within the FileManager, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of File Manager and Webix, define webix parameter in the locale setting of the File Manager constructor:

{
    view:"filemanager",
    id:"fm1",
    url:"https://demo-wfs-ls.webix.dev/",
    locale: {
      lang: "en",
      webix: {
        // switch Webix the selected locale
        en: "en-US",
        zh: "zh-CN"
      }
    }
}

Related sample:  File Manager: Switching Locales

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