HelpBot Assistant

How can I help you?

Localization in React Uploader component

21 Feb 202618 minutes to read

The localization library enables customization of the Uploader’s static text content, including action button labels, file status messages, icon titles, tooltips, and drop area text. Define locale-specific text by creating a locale object and registering it with the L10n (localization) service.

The following keys customize the Uploader’s text content:

Key Description
Browse Browse button label
Clear Clear button label
Upload Upload button label
dropFilesHint Drop area placeholder text
uploadFailedMessage File upload failure message
uploadSuccessMessage File upload success message
removedSuccessMessage File removal success message
removedFailedMessage File removal failure message
inProgress Upload in-progress status message
pauseUpload Upload paused status message
fileUploadCancel Upload cancellation message
readyToUploadMessage File selected and ready status message
invalidMaxFileSize File exceeds maximum size message
invalidFileType Invalid file type message
invalidMinFileSize File below minimum size message
remove Remove icon tooltip
cancel Cancel icon tooltip
delete Delete icon tooltip
totalFiles Total files tooltip
size File size tooltip

[Class-component]

import { L10n } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    uploadObj;
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    componentWillMount() {
        L10n.load({
            "fr-CH": {
                "uploader": {
                    "Browse": "Feuilleter",
                    "Clear": "Clair",
                    "Upload": "Télécharger",
                    "cancel": "Annuler",
                    "delete": "Supprimer le fichier",
                    "totalFiles": "Total des fichiers",
                    "size": "taille",
                    "dropFilesHint": "ou Déposer des fichiers ici",
                    "inProgress": "Téléchargement",
                    "invalidFileType": "Le type de fichier n'est pas autorisé",
                    "invalidMaxFileSize": "La taille du fichier dépasse 28 Mo",
                    "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",
                    "readyToUploadMessage": "Prêt à télécharger",
                    "remove": "Retirer",
                    "removedFailedMessage": "Le fichier n'a pas pu être supprimé",
                    "removedSuccessMessage": "Fichier supprimé avec succès",
                    "uploadFailedMessage": "Impossible d'importer le fichier",
                    "uploadSuccessMessage": "Fichier téléchargé avec succès",
                }
            }
        });
    }
    render() {
        return (<UploaderComponent asyncSettings={this.path} locale='fr-CH'/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { L10n } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public uploadObj: UploaderComponent;
  public path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  public componentWillMount(): void {
    L10n.load({
        "fr-CH": {
            "uploader": {
                "Browse"  : "Feuilleter",
                "Clear" : "Clair",
                "Upload" : "Télécharger",
                "cancel": "Annuler",
                "delete": "Supprimer le fichier",
                "totalFiles": "Total des fichiers",
                "size": "taille",
                "dropFilesHint" : "ou Déposer des fichiers ici",
                "inProgress": "Téléchargement",
                "invalidFileType" : "Le type de fichier n'est pas autorisé",
                "invalidMaxFileSize" : "La taille du fichier dépasse 28 Mo",
                "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",
                "readyToUploadMessage": "Prêt à télécharger",
                "remove": "Retirer",
                "removedFailedMessage": "Le fichier n'a pas pu être supprimé",
                "removedSuccessMessage": "Fichier supprimé avec succès",
                "uploadFailedMessage" : "Impossible d'importer le fichier",
                "uploadSuccessMessage" : "Fichier téléchargé avec succès",
            }
        }
    })
}

    public render(): JSX.Element {
        return (
            <UploaderComponent asyncSettings = {this.path} locale = 'fr-CH'/>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

import { L10n } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let uploadObj;
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    React.useEffect(() => {
        L10n.load({
            "fr-CH": {
                "uploader": {
                    "Browse": "Feuilleter",
                    "Clear": "Clair",
                    "Upload": "Télécharger",
                    "cancel": "Annuler",
                    "delete": "Supprimer le fichier",
                    "totalFiles": "Total des fichiers",
                    "size": "taille",
                    "dropFilesHint": "ou Déposer des fichiers ici",
                    "inProgress": "Téléchargement",
                    "invalidFileType": "Le type de fichier n'est pas autorisé",
                    "invalidMaxFileSize": "La taille du fichier dépasse 28 Mo",
                    "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",
                    "readyToUploadMessage": "Prêt à télécharger",
                    "remove": "Retirer",
                    "removedFailedMessage": "Le fichier n'a pas pu être supprimé",
                    "removedSuccessMessage": "Fichier supprimé avec succès",
                    "uploadFailedMessage": "Impossible d'importer le fichier",
                    "uploadSuccessMessage": "Fichier téléchargé avec succès",
                }
            }
        });
    }, []);
    return (<UploaderComponent asyncSettings={path} locale='fr-CH'/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { L10n } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let uploadObj: UploaderComponent;
    const path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  React.useEffect(() => {
    L10n.load({
        "fr-CH": {
            "uploader": {
                "Browse"  : "Feuilleter",
                "Clear" : "Clair",
                "Upload" : "Télécharger",
                "cancel": "Annuler",
                "delete": "Supprimer le fichier",
                "totalFiles": "Total des fichiers",
                "size": "taille",
                "dropFilesHint" : "ou Déposer des fichiers ici",
                "inProgress": "Téléchargement",
                "invalidFileType" : "Le type de fichier n'est pas autorisé",
                "invalidMaxFileSize" : "La taille du fichier dépasse 28 Mo",
                "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",
                "readyToUploadMessage": "Prêt à télécharger",
                "remove": "Retirer",
                "removedFailedMessage": "Le fichier n'a pas pu être supprimé",
                "removedSuccessMessage": "Fichier supprimé avec succès",
                "uploadFailedMessage" : "Impossible d'importer le fichier",
                "uploadSuccessMessage" : "Fichier téléchargé avec succès",
            }
        }
    })

}, []);

        return (
            <UploaderComponent asyncSettings = {path} locale = 'fr-CH'/>
        );
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

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