Localization

Translating Interface into Single Language

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

1. Simply specify each property when initializing an Uploader object.
2. Use predefined localizations shipped with Image Uploader SDK.
3. Use your own localization scripts.

Translating Interface Manually

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

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

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

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

Using Predefined Localizations

The second way allows you to translate Image Uploader interface using just one line of code. All you need is to specify one of the available localizations via the Uploader.LanguageLanguage (ASP.NET)Language (PHP) property. However, this property is supported only in Image Uploader ASP.NET and Image Uploader PHP.

<aur:Uploader ID="Uploader1" runat="server"
    Language="English">
</aur:Uploader>

$uploader = new Uploader("Uploader1");
$uploader->setLanguage("en");

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

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

<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">
var u = $au.uploader({
    // Image Uploader configuration
});
u.set(en_localization);
u.writeHtml();
</script>

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, Image Uploader JavaScript comes with predefined localization scripts. Each script defines a JavaScript object containing all the Image 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 Image Uploader user interface into German. Then you need to do the following:

1. 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.

2. Declare the de_localization object and add all the Image Uploader text properties.

   Here is a simplified example of this file:

   JavaScript

   var de_localization = {
       cancelUploadButtonText: 'Anhalten',
       uploadButtonText: 'Speichern',
       messages:{
           cmykImagesNotAllowed: 'CMYK-Bilder sind nicht erlaubt'
       }
   };
   

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

4. Pass the de_localization object to the uploader.set(Object) method.

   Here is a simplified example of this file:

   JavaScript

   <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
   <script type="text/javascript" src="Scripts/aurigma.uploader.de_localization.js">  </script>
   <script type="text/javascript">
   var u = $au.uploader({
       // Image Uploader configuration
   });
   u.set(de_localization);
   u.writeHtml();
   </script>
   

The main advantage of this approach is that it allows you to keep Image 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 Image 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 Image Uploader to use the corresponding localization.

<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;
    }
}

<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();
?>

<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',
    // Image Uploader configuration
});

// Apply localization
var lang = /[?&]lang=(\w{2})/.exec(location.search || location.href);
if (lang) {
    lang = lang[1];
}
      
var langObject = window[lang + '_localization'];
if (langObject) {
    u.set(langObject);
}

u.writeHtml();
</script>

See Also

Reference

• Uploader ClassUploader (ASP.NET)Uploader (PHP)uploader (JavaScript)
• InstallationProgress ClassInstallationProgress (ASP.NET)InstallationProgress (PHP)installationProgress (JavaScript)

Manual

• Customizing Appearance
• Using Image Uploader Installation Progress