Localization in Vue Uploader

03 Sep 202611 minutes to read

The Localization library allows you to localize the static text content of the Uploader. The static text contains the default text content of action buttons, file status, clear icon title, tooltips, and text content of the drag 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.

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 while 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 uploading is paused.
fileUploadCancel	To customize the status text when uploading is cancelled.
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 the tooltip text for the remove icon.
cancel	To customize the tooltip text for the cancel icon.
delete	To customize the tooltip text for the delete icon.
totalFiles	To customize the tooltip text for total files.
size	To customize the tooltip text for size.

Composition API (~/src/App.vue)

<template>
    <div class="col-lg-8 control-section uploader chunk">
        <div class="control_wrapper">
            <ejs-uploader id='validation' name="UploadFiles" :asyncSettings="path" ref="uploadObj" :locale='locale'
                :autoUpload='false'>
            </ejs-uploader>
        </div>
    </div>
</template>
<script setup>

import { UploaderComponent as EjsUploader } from '@syncfusion/ej2-vue-inputs';
import { L10n } from '@syncfusion/ej2-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"
        }
    }
})

const path = {
    saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
};
const locale = 'fr-CH';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

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

Options API (~/src/App.vue)

<template>
    <div class="col-lg-8 control-section uploader chunk">
        <div class="control_wrapper">
            <ejs-uploader id='validation' name="UploadFiles" :asyncSettings="path" ref="uploadObj" :locale='locale'
                :autoUpload='false'>
            </ejs-uploader>
        </div>
    </div>
</template>
<script>

import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';
import { L10n } from '@syncfusion/ej2-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"
        }
    }
})
export default {
    name: "App",
    components: {
        "ejs-uploader": UploaderComponent
    },
    data: function () {
        return {
            path: {
                saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
                removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
            },
            extensions: '.doc, .docx, .xls, .xlsx',
            locale: 'fr-CH'
        }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

#container {
    visibility: hidden;
    padding-left: 5%;
    width: 100%;
}

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

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