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 on the folders

File Manager titles are stored in the following object:

export default {
    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",
    Download: "Download",
    Type: "Type",
    Information: "Information",
    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",
    "Deleting...": "Deleting...",
    "Copying...": "Copying...",
    "Moving...": "Moving...",
    Folders: "Folders",
    "Search results": "Search results",
    "Search results in": "Search results in",
    "Search files and folders": "Search files and folders",
    "Add new file": "Add new file",
    "Add new folder": "Add new folder",
    "Upload file": "Upload file",
    folder: "folder",
    file: "file",
    archive: "archive",
    audio: "audio",
    image: "image",
    video: "video",
    code: "code",
    document: "document",
    of: "of",
    used: "used",
};

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": "Моя полка"
};

• Define the current locale for File Manager. For these purposes, set the locale property of File Manager in its constructor:

webix.ready(function() {
    // use custom scrolls, optional
    webix.CustomScroll.init();
 
    const fm = {
        view: "filemanager",
        id: "fm1",
        url: "//demo-wfs-ls.webix.dev/",
        locale: {
            lang: "ru"
        }
    };
 
    webix.ui(fm);
};

Related sample:  File Manager: Custom Locale

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

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