Localization in Angular Uploader component

26 Feb 20267 minutes to read

The Localization library enables you to localize static text content in the Uploader.
This includes action button labels, file status messages, icon titles, tooltips, and drag-area text. Create a locale object for your culture and assign it using the L10n load method.

The following table lists the localization keys and their descriptions:

Key	Description
Browse	Text for the browse button
Clear	Text for the clear button
Upload	Text for the upload button
dropFilesHint	Text displayed in the drop area
uploadFailedMessage	Status message when a file fails to upload
uploadSuccessMessage	Status message when a file uploads successfully
removedSuccessMessage	Status message when a file is successfully removed from the server
removedFailedMessage	Status message when file removal fails
inProgress	Status message while upload is in progress
readyToUploadMessage	Status message when a file is selected and ready for upload
pauseUpload	Status message when upload is paused
fileUploadCancel	Status message when upload is canceled
invalidMaxFileSize	Status message when file size exceeds the maximum limit
invalidFileType	Status message when file type is not allowed
invalidMinFileSize	Status message when file size is below the minimum limit
remove	Tooltip text for the remove icon
cancel	Tooltip text for the cancel icon
delete	Tooltip text for the delete icon
totalFiles	Tooltip text for total files count
size	Tooltip text for file size

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';
import { detach, L10n } from '@syncfusion/ej2-base';

@Component({
imports: [
         UploaderModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
               <ejs-uploader #defaultupload  [asyncSettings]='path' locale= 'fr-CH'  autoUpload = 'false'></ejs-uploader>
              `
})
export class AppComponent {
    public path: Object = {
      saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
      removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove' };
    ngOnInit() {
        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"
        }
    }
})
        }
    constructor() {
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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