Localization of ActiveX/Java Uploader

To make ActiveX/Java Uploader usage easier for non-English users, we provide a possibility to change all text that can ever be displayed by the control. Each text label, button caption, or error message can be changed using the appropriate class property.

Let us examine this possibility by the example of solving the following tasks:

Simple translation of the interface into a single language.
Implementing multilingual interface.

Translating Interface into Single Language

This task implies that ActiveX/Java Uploader user interface is translated into a single language. Here you can use the following ways:

Simply specify each property when initializing an Uploader object.
Use predefined localizations shipped with Upload Suite SDK.
Use your own localization scripts.

Translating Interface Manually

In the first case, necessary text properties with translation are added just like any other ActiveX/Java Uploader property. This way is the most suitable if you use default localization and want to modify some captions and messages.

ASP.NET

<aur:Uploader ID="Uploader1" runat="server"
    CancelUploadButtonText="Stop"
    UploadButtonText="Send">
    <Messages CmykImagesNotAllowed="CMYK images are not allowed" />
</aur:Uploader>

PHP

$uploader = new Uploader("Uploader1");
$uploader->setCancelUploadButtonText("Stop");
$uploader->setUploadButtonText("Send");
$uploader->getMessages()->setCmykImagesNotAllowed("CMYK images are not allowed");
$uploader->render();

JavaScript

var u = $au.uploader({
    cancelUploadButtonText: 'Stop',
    uploadButtonText: 'Send',
    messages:{
        cmykImagesNotAllowed: 'CMYK images are not allowed'
    }
});

Note

If you use the installation progress you should additionally localize the InstallationProgressInstallationProgress (ASP.NET)InstallationProgress (PHP)installationProgress (JavaScript) properties. See details in the Using ActiveX Uploader Installation Progress topic.

Using Predefined Localizations

The second way allows you to translate ActiveX/Java Uploader interface using few lines of code. All you need is to specify one of the available localizations via the Uploader.LanguageLanguage (ASP.NET)Language (PHP) and Uploader.Language properties. However, these properties are supported only in ActiveX/Java Uploader ASP.NET and ActiveX/Java Uploader PHP.

ASP.NET

<!-- setting up ActiveX/Java Uploader translation -->
<aur:Uploader ID="Uploader1" runat="server" Language="Swedish" />
<!-- setting up Installation Progress translation -->
<aur:InstallationProgress runat="server" TargetControlID="Uploader1" Language="Swedish" />

PHP

<html>
<body>
    <?php 
        require_once "ImageUploaderPHP/Uploader.class.php";
        require_once "ImageUploaderPHP/InstallationProgress.class.php";
        
        $uploader = new Uploader("Uploader1");
        // setting up ActiveX/Java Uploader translation
        $uploader->setLanguage("en");
        //setting up Installation Progress translation
        $ip = new InstallationProgress($uploader);
        $ip->setLanguage("en");

        $uploader->render();
    ?>
</body>
</html>

In ActiveX/Java Uploader JavaScript you should use aurigma.uploader.X_localization.js (where X is a language code) files which come with ActiveX/Java Uploader. These files are located in the /Scripts folder and contain all the text properties translated to the corresponding language. Thus, to translate ActiveX/Java Uploader interface do the following:

Link the aurigma.uploader.en_localization.js file with the page where you configure an uploader object.
Pass the $au.language.en object defined in this file to the uploader.set(Object) method.

JavaScript

<html>
<body>
    <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.installationprogress.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.en_localization.js">  </script>
    <script type="text/javascript">
        var u = $au.uploader({
            // ActiveX/Java Uploader configuration
        });

        // setting up ActiveX/Java Uploader translation
        u.set($au.language.en);

        //setting up Installation Progress translation    
        var ip = $au.installationProgress(u);
        ip.set($au.ip_language.en);
        
        u.writeHtml();
    </script>
</body>
</html>

You can use the aurigma.uploader.en_localization.js file as template to create your own localization script.

Using Custom Localization Scripts

As it was mentioned above, ActiveX/Java Uploader JavaScript comes with predefined localization scripts. Each script defines a JavaScript object containing all the ActiveX/Java Uploader text properties translated to a particular language. The same approach can be easily used to create your custom localization scripts.

Suppose, you want to translate ActiveX/Java Uploader user interface into German. Then you need to do the following:

Create the aurigma.uploader.de_localization.js file in the /Scripts folder of your application (where the aurigma.uploader.js file resides).

Note
Localization file should be saved in UTF-8.

Declare the $au.language.de object and add all the ActiveX/Java Uploader text properties.

Here is a simplified example of this file:

JavaScript

(function(window, undefined) {

// Define global Aurigma.ImageUploader namespace
var AU = (window.Aurigma || (window.Aurigma = { __namespace: true })) &&
    (window.Aurigma.ImageUploader || (window.Aurigma.ImageUploader = { __namespace: true }));

AU.language || (AU.language = { __namespace: true });
AU.ip_language || (AU.ip_language = { __namespace: true });

window.de_localization = AU.language.de = {
    cancelUploadButtonText: 'Anhalten',
    uploadButtonText: 'Speichern',
    messages:{
        cmykImagesNotAllowed: 'CMYK-Bilder sind nicht erlaubt'
    }};

AU.ip_language.de = {
    "progressHtml": "<p><img src=\"{0}\" /><br />Aurigma Image Uploader wird geladen...</p>"
};    
})(window);

Link this file with the page where you configure an uploader object.

Pass the $au.language.de object to the uploader.set(Object) method.

Here is a simplified example of this file:

JavaScript

<html>
<body>
    <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.installationprogress.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.de_localization.js">  </script>
    <script type="text/javascript">
        var u = $au.uploader({
            // ActiveX/Java Uploader configuration
        });

        // setting up ActiveX/Java Uploader translation
        u.set($au.language.de);

        //setting up Installation Progress translation    
        var ip = $au.installationProgress(u);
        ip.set($au.ip_language.de);
        
        u.writeHtml();
    </script>
</body>
</html>

The main advantage of this approach is that it allows you to keep ActiveX/Java Uploader text parameters separately from its configuration.

Implementing Multilingual Interface

The idea is the following: add a list of links containing available languages and translate ActiveX/Java Uploader GUI to the currently selected language. To implement this, insert links for languages you need. Each link should refer to the same page and add the lang parameter containing the selected language code. Then when the page is loading, just parse the lang parameter and configure ActiveX/Java Uploader to use the corresponding localization.

ASP.NET

<form id="form1" runat="server">
    <ul>
        <li>
            <asp:LinkButton ID="enLangLinkButton" runat="server" OnClick="langLinkButton_Click">
                English
            </asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="ruLangLinkButton" runat="server" OnClick="langLinkButton_Click">
                Russian
            </asp:LinkButton>
        </li>
    </ul>
    <aur:Uploader ID="Uploader1" runat="server" />
</form>

protected void langLinkButton_Click(object sender, EventArgs e)
{
    if (sender == enLangLinkButton)
    {
        Uploader1.Language = Aurigma.ImageUploader.Language.English;
    }
    else if (sender == ruLangLinkButton)
    {
        Uploader1.Language = Aurigma.ImageUploader.Language.Russian;
    }
}

PHP

<ul>
    <li><a href="?lang=en" id="lang_en">English</a></li>
    <li><a href="?lang=ru" id="lang_ru">Russian</a></li>
</ul>
<?php
require_once "ImageUploaderPHP/Uploader.class.php";
$uploader = new Uploader('Uploader1');

// Set language
if (isset($_GET['lang'])) {
    switch ($_GET['lang']) {
        case 'en':
            $uploader->setLanguage('en');
            break;
        case 'ru':
            $uploader->setLanguage('ru');
            break;
    }
}

$uploader->render();
?>

JavaScript

<html>
<body>
    <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.en_localization.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.uploader.ru_localization.js">  </script>
    <ul>
        <li><a href="?lang=en" id="lang_en">English</a></li>
        <li><a href="?lang=ru" id="lang_ru">Russian</a></li>
    </ul>
    <script type="text/javascript">
    var u = $au.uploader({
        id: 'Uploader1',
        // ActiveX/Java Uploader configuration
    });
    
    var ip = $au.installationProgress(u);
    
    // Apply localization
    var lang = /[?&]lang=(\w{2})/.exec(location.search || location.href);
    if (lang) {
        lang = lang[1];
    }
          
    var langObject = window['$au.language.' + lang];
    if (langObject) {
        u.set(langObject);
        ip.set(langObject);
    }

    u.writeHtml();
    </script>
</body>
</html>

Localization of ActiveX/Java Uploader

Translating Interface into Single Language

Translating Interface Manually

Using Predefined Localizations

Using Custom Localization Scripts

Implementing Multilingual Interface

See Also

Reference

Manual