Localization in Angular Uploader

31 Aug 20267 minutes to read

The Localization library enables you to localize static text content in the Uploader, including action button labels, file status messages, icon titles, tooltips, and drag-area text. To localize the content, create a locale object for your culture and load it using the L10n.load method (import L10n from @syncfusion/ej2-base). Set the Uploader’s locale property to the culture code you loaded so the component renders the localized strings.

The following table lists the localization keys and their descriptions:

Key	Default value	Description
Browse	Browse	Text for the browse button
Clear	Clear	Text for the clear button
Upload	Upload	Text for the upload button
dropFilesHint	Drop files here to upload	Text displayed in the drop area
uploadFailedMessage	File failed to upload	Status message when a file fails to upload
uploadSuccessMessage	File uploaded successfully	Status message when a file uploads successfully
removedSuccessMessage	File removed successfully	Status message when a file is successfully removed from the server
removedFailedMessage	File could not be removed	Status message when file removal fails
inProgress	Uploading	Status message while upload is in progress
readyToUploadMessage	Ready to upload	Status message when a file is selected and ready for upload
pauseUpload	Upload paused	Status message when upload is paused (relevant only when chunk upload is enabled)
fileUploadCancel	File upload canceled	Status message when upload is canceled (relevant only when chunk upload is enabled)
invalidMaxFileSize	File size is too large	Status message when file size exceeds the maximum limit
invalidFileType	File type is not allowed	Status message when file type is not allowed
invalidMinFileSize	File size is too small	Status message when file size is below the minimum limit
remove	Remove	Tooltip text for the remove icon
cancel	Cancel	Tooltip text for the cancel icon
delete	Delete file	Tooltip text for the delete icon
totalFiles	Total files	Tooltip text for total files count
size	Size	Tooltip text for file size

The example below loads French (fr-CH) values for several of these keys and sets the Uploader’s locale to fr-CH.

app.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 localize Uploader labels, status messages, and tooltips.