Localization in React Uploader component

1 Dec 202318 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 drag area. Define the locale object for a culture and assign it to L10n load method.

The following list of keys and its values which are 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 is failed 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 the successfully from the serve.
removedFailedMessage	To customize the status text while the file is failed to remove.
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 tooltip text for remove icon.
cancel	To customize tooltip text for cancel icon.
delete	To customize tooltip text for delete icon.
totalFiles	To customize tooltip text for total files.
size	To customize tooltip text for size.

[Class-component]

index.jsx

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'));

index.tsx

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]

index.jsx

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'));

index.tsx

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.