Localization in EJ2 JavaScript File Upload

08 Sep 20269 minutes to read

The Localization library allows you to localize static text content of the uploader. The static text contains default text content of action buttons, file status, clear icon title, tooltips, and text content of the drop area. Define the locale object for a culture and assign it to the L10n load method.

The following is the list of keys and their values used in the uploader component:

Key Description
Browse To customize the browse button text.
Clear To customize the clear button text.
Upload To customize the upload button text.
dropFilesHint To customize the drop area text.
uploadFailedMessage To customize the status text when the file fails to upload.
uploadSuccessMessage To customize the status text when the file is uploaded successfully.
removedSuccessMessage To customize the status text when the file is removed successfully from the server.
removedFailedMessage To customize the status text when the file fails to be removed.
inProgress To customize the status text while the upload is in progress.
pauseUpload To customize the status text while the upload is paused.
fileUploadCancel To customize the status text when uploading is canceled.
readyToUploadMessage To customize the status text when the file is selected and ready to upload.
invalidMaxFileSize To customize the status text when the file size is greater than the maximum file size.
invalidFileType To customize the status text when the file type is invalid.
invalidMinFileSize To customize the status text when the file size is less than the minimum file size.
remove To customize tooltip text for the remove icon.
cancel To customize tooltip text for the cancel icon.
delete To customize tooltip text for the delete icon.
totalFiles To customize tooltip text for the total files.
size To customize tooltip text for the size. 
ej.base.enableRipple(true);
    ej.base.L10n.load({
        "fr-CH": {
            "uploader": {
                "invalidMinFileSize": "La taille du fichier est trop petite! S'il vous plaît télécharger des fichiers avec une taille minimale de 10 Ko",
                "invalidMaxFileSize": "La taille du fichier dépasse 28 Mo",
                "invalidFileType": "Le type de fichier n'est pas autorisé",
                "Browse": "Feuilleter",
                "Clear": "Clair",
                "Upload": "Télécharger",
                "dropFilesHint": "ou Déposer des fichiers ici",
                "uploadFailedMessage": "Impossible d'importer le fichier",
                "uploadSuccessMessage": "Fichier téléchargé avec succès",
                "removedSuccessMessage": "Fichier supprimé avec succès",
                "removedFailedMessage": "Le fichier n'a pas pu être supprimé",
                "inProgress": "Téléchargement",
                "readyToUploadMessage": "Prêt à télécharger",
                "remove": "Retirer",
                "cancel": "Annuler",
                "delete": "Supprimer le fichier",
                "totalFiles": "Total des fichiers",
                "size": "taille"
            }
        }
    });
    var dropElement = document.getElementsByClassName('control-fluid')[0];
    var uploadObj = new ej.inputs.Uploader({
        autoUpload: false,
        asyncSettings: {
            saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
            removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
        },
        dropArea: dropElement,
        locale: 'fr-CH'
    });
    uploadObj.appendTo('#fileupload');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Uploader Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
        <div id="container" class="fileupload">
            <input type="file" id="fileupload" name="UploadFiles">
        </div>
    

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;  
  margin: 0 auto;
  width: 400px;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

You can also explore JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.