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

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 {
    Save: "Save",
    "Save all": "Save all",
    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?",
    "Save before closing?": "Save before closing?",
    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",
    "Upload folder": "Upload folder",
    folder: "folder",
    file: "file",
    archive: "archive",
    audio: "audio",
    image: "image",
    video: "video",
    code: "code",
    document: "document",
    of: "of",
    used: "used",
    "Open item location": "Open item location",
    "Are you sure you want to delete": "Are you sure you want to delete",
    "these items:": "these items:",
    "this item:": "this item:",
    "Delete files": "Delete files",
    and: "and",
    "more file(s)": "more file(s)",
    "Close the editor": "Close the editor",
    "Close this file": "Close this file",
};

Specifying Custom Locale

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

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

2. 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);
});

How to Switch Locales at Runtime

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

1. First, set custom translations to the desired labels:

fileManager.locales.ru = {  // Russian
    Files: "Файлы", "My Files": "Моя полка", ...
};
 
fileManager.locales.zh = {  // Chinese
    Files: "檔案", "My Files": "我的檔案", ...
};

2. 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" }
    ]
}

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"
      }
    }
}

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.