Localization of HTML5/Flash Uploader

Translating Interface into Single Language

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

1. Simply specify each property when initializing an ImageUploaderFlash object.
2. Use predefined localizations shipped with Upload Suite 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 HTML5/Flash Uploader property. This way is the most suitable if you use default localization and want to modify some captions and messages.

<aur:ImageUploaderFlash ID="Uploader1" runat="server"
    CancelUploadButtonText="Stop"
    UploadButtonText="Send">
    <Messages PreviewNotAvailable="Preview is not available" />
</aur:ImageUploaderFlash>

$uploader = new ImageUploaderFlash("Uploader1");
$uploader->setCancelUploadButtonText("Stop");
$uploader->setUploadButtonText("Send");
$uploader->getMessages()->setPreviewNotAvailable("Preview is not available");

var fu = $au.imageUploaderFlash({
    cancelUploadButtonText: 'Stop',
    uploadButtonText: 'Send',
    messages:{
        previewNotAvailable: 'Preview is not available'
    }
});

Using Predefined Localizations

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

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

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

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

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

<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js">  </script>
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.en_localization.js">  </script>
<script type="text/javascript">
var fu = $au.imageUploaderFlash({
    // HTML5/Flash Uploader configuration
});
fu.set($au.language.en);
fu.writeHtml();
</script>

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

Using Custom Localization Scripts

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

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

   Note

   Localization file should be saved in UTF-8.

2. Declare the $au.language.de object and add all the HTML5/Flash Uploader text properties.

   Here is a simplified example of this file:

   JavaScript

   (function(window, undefined) {
   
   // Define global Aurigma.ImageUploaderFlash namespace
   var AU = (window.Aurigma || (window.Aurigma = { __namespace: true })) &&
       (window.Aurigma.ImageUploaderFlash || (window.Aurigma.ImageUploaderFlash = { __namespace: true }));
   
   AU.language || (AU.language = { __namespace: true });
   
   // German
   window.de_localization = AU.language.de = {
       cancelUploadButtonText: 'Anhalten',
       uploadButtonText: 'Speichern',
       messages:{
           previewNotAvailable: 'Vorschau ist nicht verfugbar'
       }};
   })(window);
   

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

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

   Here is a simplified example of this file:

   JavaScript

   <script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js">  </script>
   <script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.de_localization.js">  </script>
   <script type="text/javascript">
   var fu = $au.imageUploaderFlash({
       // HTML5/Flash Uploader configuration
   });
   fu.set($au.language.de);
   fu.writeHtml();
   </script>
   

The main advantage of this approach is that it allows you to keep HTML5/Flash 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 HTML5/Flash 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 HTML5/Flash 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:ImageUploaderFlash ID="Uploader1" runat="server" />
</form>

protected void langLinkButton_Click(object sender, EventArgs e)
{
    if (sender == enLangLinkButton)
    {
        Uploader1.Language = Aurigma.ImageUploaderFlash.Language.English;
    }
    else if (sender == ruLangLinkButton)
    {
        Uploader1.Language = Aurigma.ImageUploaderFlash.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 "ImageUploaderFlashPHP/Uploader.class.php";
$uploader = new ImageUploaderFlash('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.imageuploaderflash.js">  </script>
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.en_localization.js">  </script>
<script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.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 fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    // HTML5/Flash Uploader configuration
});

// 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) {
    fu.set(langObject);
}

fu.writeHtml();
</script>

See Also

Reference

• ImageUploaderFlash ClassImageUploaderFlash (ASP.NET)ImageUploaderFlash (PHP)imageUploaderFlash (JavaScript)

Manual

• Customizing Appearance in HTML5/Flash Uploader