Localization in Vue File Manager component

19 Feb 202524 minutes to read

The File Manager can be localized to any culture by defining the corresponding texts and messages for that culture. The default locale of the File Manager is en (English). The following table lists the default texts and messages of the File Manager in the en culture.

KEY Text/Message
NewFolder New folder
Upload Upload
Delete Delete
Rename Rename
Download Download
Cut Cut
Copy Copy
Paste Paste
SortBy Sort by
Refresh Refresh
Item-Selection item selected
Items-Selection items selected
View View
Details Details
SelectAll Select all
Open Open
Tooltip-NewFolder New folder
Tooltip-Upload Upload
Tooltip-Delete Delete
Tooltip-Rename Rename
Tooltip-Download Download
Tooltip-Cut Cut
Tooltip-Copy Copy
Tooltip-Paste Paste
Tooltip-SortBy Sort by
Tooltip-Refresh Refresh
Tooltip-Selection Clear selection
Tooltip-View View
Tooltip-Details Details
Tooltip-SelectAll Select all
Name Name
Size Size
DateModified Modified
DateCreated Date created
Path Path
Created Created
Modified Modified
Location Location
Type Type
Permission Permission
Ascending Ascending
Descending Descending
None None
View-LargeIcons Large icons
View-Details Details
Search Search
Button-Ok OK
Button-Cancel Cancel
Button-Yes Yes
Button-No No
Button-Create Create
Button-Save Save
Header-NewFolder Folder
Content-NewFolder Enter your folder name
Header-Rename Rename
Content-Rename Enter your new name
Header-Rename-Confirmation Rename Confirmation
Content-Rename-Confirmation If you change a file name extension, the file might become unstable. Are you sure you want to change it?
Header-Delete Delete File
Content-Delete Are you sure you want to delete this file?
Header-Multiple-Delete Delete Multiple Files
Content-Multiple-Delete Are you sure you want to delete these {0} files?
Header-Folder-Delete Delete Folder
Content-Folder-Delete Are you sure you want to delete this folder?
Header-Duplicate File exists
Content-Duplicate already exists. Are you sure you want to replace it?
Header-Upload Upload Files
Error Error
Validation-Empty The file or folder name cannot be empty.
Validation-Invalid The file or folder name {0} contains invalid characters. Please use a different name. Valid file or folder names cannot end with a dot or space, and cannot contain any of the following characters: \/:*?"<>|
Validation-NewFolder-Exists A file or folder with the name {0} already exists.
Validation-Rename-Exists Cannot rename {0} to {1}, destination already exists.
Folder-Empty This folder is empty
File-Upload Drag files here to upload
Search-Empty No results found
Search-Key Try with different keywords
Filter-Empty No results found
Filter-Key Try with different filter
Sub-Folder-Error The destination folder is the subfolder of the source folder
Same-Folder-Error The destination folder is the same as the source folder.
Access-Denied Access Denied
Access-Details You don’t have permission to access this folder
Header-Retry File Already Exists
Content-Retry A file with this name already exists in this folder. What would you like to do?
Button-Keep-Both Keep both
Button-Replace Replace
Button-Skip Skip
ApplyAll-Label Do this for all current items
KB KB
Access-Message {0} is not accessible. You need permission to perform the {1} action.
Network-Error Network Error: Failed to send on XMLHTTPRequest: Failed to load
Server-Error Server Error: Invalid response from

The example below demonstrates adding the German culture locale (de-DE).

<template>
<div id="app">
    <div class="wrapper">
     <ejs-filemanager id="locale_filemanager" :ajaxSettings="ajaxSettings" :locale="locale">
     </ejs-filemanager>
    </div>
</div>
</template>
<script setup>
import { provide } from "vue";

import { FileManagerComponent as EjsFilemanager, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { L10n } from "@syncfusion/ej2-base";

//Defining texts and messages corresponding to German culture
L10n.load({
    "de": {
        "filemanager": {
           "NewFolder": "Neuer Ordner",
            "Upload": "Hochladen",
            "Delete": "Löschen",
            "Rename": "Umbenennen",
            "Download": "Herunterladen",
            "Cut": "Schnitt",
            "Copy": "Kopieren",
            "Paste": "Einfügen",
            "SortBy": "Sortiere nach",
            "Refresh": "Aktualisierung",
            "Item-Selection": "Artikel ausgewählt",
            "Items-Selection": "Elemente ausgewählt",
            "View": "Aussicht",
            "Details": "Einzelheiten",
            "SelectAll": "Wählen Sie Alle",
            "Open": "Öffnen",
            "Tooltip-NewFolder": "Neuer Ordner",
            "Tooltip-Upload": "Hochladen",
            "Tooltip-Delete": "Löschen",
            "Tooltip-Rename": "Umbenennen",
            "Tooltip-Download": "Herunterladen",
            "Tooltip-Cut": "Schnitt",
            "Tooltip-Copy": "Kopieren",
            "Tooltip-Paste": "Einfügen",
            "Tooltip-SortBy": "Sortiere nach",
            "Tooltip-Refresh": "Aktualisierung",
            "Tooltip-Selection": "Auswahl aufheben",
            "Tooltip-View": "Aussicht",
            "Tooltip-Details": "Einzelheiten",
            "Tooltip-SelectAll": "Wählen Sie Alle",
            "Name": "Name",
            "Size": "Größe",
            "DateModified": "Geändert",
            "DateCreated": "Datum erstellt",
            "Path": "Pfad",
            "Modified": "Geändert",
            "Created": "Erstellt",
            "Location": "Ort",
            "Type": "Art",
            "Permission": "Genehmigung",
            "Ascending": "Aufsteigend",
            "Descending": "Absteigend",
            "None": "Keiner",
            "View-LargeIcons": "Große Icons",
            "View-Details": "Einzelheiten",
            "Search": "Suche",
            "Button-Ok": "OK",
            "Button-Cancel": "Stornieren",
            "Button-Yes": "Ja",
            "Button-No": "Nein",
            "Button-Create": "Erstellen",
            "Button-Save": "Sparen",
            "Header-NewFolder": "Mappe",
            "Content-NewFolder": "Geben Sie Ihren Ordnernamen ein",
            "Header-Rename": "Umbenennen",
            "Content-Rename": "Geben Sie Ihren neuen Namen ein",
            "Header-Rename-Confirmation": "Bestätigung umbenennen",
            "Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?",
            "Header-Delete": "Datei löschen",
            "Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
            "Header-Multiple-Delete": "Mehrere Dateien löschen",
            "Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich löschen?",
            "Header-Folder-Delete": "Lösche Ordner",
            "Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich löschen?",
            "Header-Duplicate": "Datei / Ordner existiert",
            "Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen und einfügen?",
            "Header-Upload": "Daten hochladen",
            "Error": "Error",
            "Validation-Empty": "Der Datei - oder Ordnername darf nicht leer sein.",
            "Validation-Invalid": "Der Datei- oder Ordnername {0} enthält ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei- oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und keines der folgenden Zeichen enthalten: \\ /: *? \" < > | ",
            "Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit dem Namen {0} existiert bereits.",
            "Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt werden: Ziel existiert bereits.",
            "Folder-Empty": "Dieser Ordner ist leer",
            "File-Upload": "Dateien zum Hochladen hierher ziehen",
            "Search-Empty": "Keine Ergebnisse gefunden",
            "Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
            "Filter-Empty": "keine Ergebnisse gefunden",
            "Filter-Key" : "Versuchen Sie es mit einem anderen Filter",
            "Sub-Folder-Error": "Der Zielordner ist der Unterordner des Quellordners.",
            "Same-Folder-Error": "Der Zielordner ist derselbe wie der Quellordner.",
            "Access-Denied": "Zugriff verweigert",
            "Access-Details": "Sie haben keine Berechtigung, auf diesen Ordner zuzugreifen.",
            "Header-Retry": "Die Datei existiert bereits",
            "Content-Retry": "In diesem Ordner ist bereits eine Datei mit diesem Namen vorhanden. Was möchten Sie tun?",
            "Button-Keep-Both": "Behalte beides",
            "Button-Replace": "Ersetzen",
            "Button-Skip": "Überspringen",
            "ApplyAll-Label": "Mache das für alle aktuellen Artikel",
            "KB": "KB",
            "Access-Message": "{0} ist nicht zugänglich. Sie benötigen die Berechtigung, um die Aktion {1} auszuführen.",
            "Network-Error": "NetworkError: Fehler beim Senden auf XMLHTTPRequest: Fehler beim Laden",
            "Server-Error": "ServerError: Ungültige Antwort von"
        }
    }
});

const ajaxSettings =
{
    url: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",
    getImageUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",
    uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",
    downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
};

//defining the locale for File Manager
const locale = "de";

provide('filemanager',  [DetailsView, NavigationPane, Toolbar]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";
</style>
<template>
<div id="app">
    <div class="wrapper">
     <ejs-filemanager id="locale_filemanager" :ajaxSettings="ajaxSettings" :locale="locale">
     </ejs-filemanager>
    </div>
</div>
</template>
<script>

import { FileManagerComponent, DetailsView, NavigationPane, Toolbar } from "@syncfusion/ej2-vue-filemanager";
import { L10n } from "@syncfusion/ej2-base";

//Defining texts and messages corresponding to German culture
L10n.load({
    "de": {
        "filemanager": {
           "NewFolder": "Neuer Ordner",
            "Upload": "Hochladen",
            "Delete": "Löschen",
            "Rename": "Umbenennen",
            "Download": "Herunterladen",
            "Cut": "Schnitt",
            "Copy": "Kopieren",
            "Paste": "Einfügen",
            "SortBy": "Sortiere nach",
            "Refresh": "Aktualisierung",
            "Item-Selection": "Artikel ausgewählt",
            "Items-Selection": "Elemente ausgewählt",
            "View": "Aussicht",
            "Details": "Einzelheiten",
            "SelectAll": "Wählen Sie Alle",
            "Open": "Öffnen",
            "Tooltip-NewFolder": "Neuer Ordner",
            "Tooltip-Upload": "Hochladen",
            "Tooltip-Delete": "Löschen",
            "Tooltip-Rename": "Umbenennen",
            "Tooltip-Download": "Herunterladen",
            "Tooltip-Cut": "Schnitt",
            "Tooltip-Copy": "Kopieren",
            "Tooltip-Paste": "Einfügen",
            "Tooltip-SortBy": "Sortiere nach",
            "Tooltip-Refresh": "Aktualisierung",
            "Tooltip-Selection": "Auswahl aufheben",
            "Tooltip-View": "Aussicht",
            "Tooltip-Details": "Einzelheiten",
            "Tooltip-SelectAll": "Wählen Sie Alle",
            "Name": "Name",
            "Size": "Größe",
            "DateModified": "Geändert",
            "DateCreated": "Datum erstellt",
            "Path": "Pfad",
            "Modified": "Geändert",
            "Created": "Erstellt",
            "Location": "Ort",
            "Type": "Art",
            "Permission": "Genehmigung",
            "Ascending": "Aufsteigend",
            "Descending": "Absteigend",
            "None": "Keiner",
            "View-LargeIcons": "Große Icons",
            "View-Details": "Einzelheiten",
            "Search": "Suche",
            "Button-Ok": "OK",
            "Button-Cancel": "Stornieren",
            "Button-Yes": "Ja",
            "Button-No": "Nein",
            "Button-Create": "Erstellen",
            "Button-Save": "Sparen",
            "Header-NewFolder": "Mappe",
            "Content-NewFolder": "Geben Sie Ihren Ordnernamen ein",
            "Header-Rename": "Umbenennen",
            "Content-Rename": "Geben Sie Ihren neuen Namen ein",
            "Header-Rename-Confirmation": "Bestätigung umbenennen",
            "Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?",
            "Header-Delete": "Datei löschen",
            "Content-Delete": "Möchten Sie diese Datei wirklich löschen?",
            "Header-Multiple-Delete": "Mehrere Dateien löschen",
            "Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich löschen?",
            "Header-Folder-Delete": "Lösche Ordner",
            "Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich löschen?",
            "Header-Duplicate": "Datei / Ordner existiert",
            "Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen und einfügen?",
            "Header-Upload": "Daten hochladen",
            "Error": "Error",
            "Validation-Empty": "Der Datei - oder Ordnername darf nicht leer sein.",
            "Validation-Invalid": "Der Datei- oder Ordnername {0} enthält ungültige Zeichen. Bitte verwenden Sie einen anderen Namen. Gültige Datei- oder Ordnernamen dürfen nicht mit einem Punkt oder Leerzeichen enden und keines der folgenden Zeichen enthalten: \\ /: *? \" < > | ",
            "Validation-NewFolder-Exists": "Eine Datei oder ein Ordner mit dem Namen {0} existiert bereits.",
            "Validation-Rename-Exists": "{0} kann nicht in {1} umbenannt werden: Ziel existiert bereits.",
            "Folder-Empty": "Dieser Ordner ist leer",
            "File-Upload": "Dateien zum Hochladen hierher ziehen",
            "Search-Empty": "Keine Ergebnisse gefunden",
            "Search-Key": "Versuchen Sie es mit anderen Stichwörtern",
            "Filter-Empty": "keine Ergebnisse gefunden",
            "Filter-Key" : "Versuchen Sie es mit einem anderen Filter",
            "Sub-Folder-Error": "Der Zielordner ist der Unterordner des Quellordners.",
            "Same-Folder-Error": "Der Zielordner ist derselbe wie der Quellordner.",
            "Access-Denied": "Zugriff verweigert",
            "Access-Details": "Sie haben keine Berechtigung, auf diesen Ordner zuzugreifen.",
            "Header-Retry": "Die Datei existiert bereits",
            "Content-Retry": "In diesem Ordner ist bereits eine Datei mit diesem Namen vorhanden. Was möchten Sie tun?",
            "Button-Keep-Both": "Behalte beides",
            "Button-Replace": "Ersetzen",
            "Button-Skip": "Überspringen",
            "ApplyAll-Label": "Mache das für alle aktuellen Artikel",
            "KB": "KB",
            "Access-Message": "{0} ist nicht zugänglich. Sie benötigen die Berechtigung, um die Aktion {1} auszuführen.",
            "Network-Error": "NetworkError: Fehler beim Senden auf XMLHTTPRequest: Fehler beim Laden",
            "Server-Error": "ServerError: Ungültige Antwort von"
        }
    }
});

export default {
    name: "App",
    components: {
        "ejs-filemanager":FileManagerComponent
    },
     data () {
        return {
           ajaxSettings:
            {
                url: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations",
                getImageUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage",
                uploadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload",
                downloadUrl: "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
            },
            //defining the locale for File Manager
            locale: "de"
        };
    },
    provide: {
            filemanager: [DetailsView, NavigationPane, Toolbar]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-filemanager/styles/material.css";
</style>