Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

For more information on how globalization practices are implemented in KendoReact, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to localize the built-in messages of the KendoReact Upload.

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from '@progress/kendo-react-upload';
import { IntlProvider, LocalizationProvider, loadMessages } from '@progress/kendo-react-intl';
import bgMessages from './bg.json';
loadMessages(bgMessages, 'bg-BG');

class App extends React.Component {
    render() {
        return (
            <LocalizationProvider language="bg-BG">
                <IntlProvider locale="bg" >
                    <Upload
                        batch={false}
                        multiple={true}
                        defaultFiles={[]}
                        withCredentials={false}
                        saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
                        removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
                    />
                 </IntlProvider>
            </LocalizationProvider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Upload supports the localization of its messages by utilizing the KendoReact Internationalization package.

The following table lists the built-in message keys and their default values.

Message KeyDefault Value
upload.cancelCancel
upload.clearSelectedFilesClear
upload.dropFilesHereDrop files here to upload
upload.headerStatusUploadedDone
upload.headerStatusUploadingUploading...
upload.invalidFileExtensionFile type not allowed.
upload.invalidFilesInvalid file(s). Please check file upload requirements.
upload.invalidMaxFileSizeFile size too large.
upload.invalidMinFileSizeFile size too small.
upload.removeRemove
upload.retryRetry
upload.selectSelect files...
upload.uploadSelectedFilesUpload
upload.totalTotal
upload.filesfiles

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Upload.

import React from 'react';
import ReactDOM from 'react-dom';
import { Upload } from '@progress/kendo-react-upload';

class App extends React.Component {
    render() {
        return (
           <div className="k-rtl" dir="rtl">
                <Upload
                    batch={false}
                    multiple={true}
                    defaultFiles={[]}
                    withCredentials={false}
                    saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
                    removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
                    autoupload={false}
                />
           </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /