To make Image Uploader easier to use 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 property.

There are two ways to add the translation of the control:

  1. Simply add each property when initializing ImageUploaderWriter.
  2. Use iuembed.Localization_X.js files from Image Uploader embedding scripts library or create your own localization scripts.

Changing Interface Language Statically

In the first case, necessary text properties with translation are added just like any other Image Uploader property. Additionally, you need to localize installation progress which is represented by the InstallationProgressExtender class defined in the iuembed.InstallationProgress.js file of Image Uploader embedding scripts library.

Here is a list of its properties necessary for localization:

  • setCommonHtml(value) specifies HTML-marked description of the ActiveX control displayed on the both stages (downloading and installation).
  • setProgressHtml(value) specifies the text saying that the downloading of the ActiveX control is in progress.
  • setJavaProgressHtml(value) specifies the text saying that the downloading of the Java applet is in progress.
  • setCommonInstallJavaHtml(value) specifies common instructions on the Java applet installation.
  • setBrowserTypeProgressHtml(value) specifies downloading instructions depending on the browser type.
  • setBrowserTypeInstructionsHtml(value) specifies ActiveX control installation instructions depending on the client browser.
  • setBrowserTypeInstallJavaHtml(value) specifies Java applet installation instructions depending on the client browser.
  • setAltInstallerHtml(value) specifies a HTML-marked text appended to installation instructions in the case if alternative installer is enabled.

Read the Using Image Uploader Installation Progress topic for a full list of the InstallationProgressExtender properties.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript" src="iuembed.InstallationProgress.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Other params and event handlers

//ImageUploader text properties
iu.addParam("DropFilesHereText", "Drop files here");
//...more ImageUploader text properties

//InstallationProgressExtender text properties
var ip = new InstallationProgressExtender(iu);

ip.setCommonHtml("<p>Aurigma Image Uploader ActiveX control is necessary to upload "
		+ "your files quickly and easily. You will be able to select multiple images "
		+ "in user-friendly interface instead of clumsy input fields with <strong>Browse</strong> button.</p>");
ip.setJavaProgressHtml("<p><img src=\"{0}\" /><br />Loading Aurigma Image Uploader Java Applet...</p>");		
//...more InstallationProgressExtender text properties

//...Other params and event handlers

iu.writeHtml();
</script>
Note

Pay attention to the differences in syntax when localizing ImageUploader and InstallationProgressExtender properties.

When translating the values of the properties, you may notice that some of them contain words in brackets like [Limit], [Name], and so on. These are placeholders that should not be translated. In runtime they will be replaced with the appropriate values depending on the message displayed.

For example, you set the file size limit of 5 MB, and the user wants to upload a 10 MB image named My File.jpg. In this case, the MessageMaxFileSizeExceededText property will be used in a warning message. By default, it has the value:

The file [Name] cannot be selected. This file size exceeds the limit ([Limit] KB).

And when the user sees this text, it will already contain corresponding values:

The file My File.jpg cannot be selected. This file size exceeds the limit (5120 KB).

See reference on the appropriate properties to learn more about the meaning of particular placeholders.

Note

If you want to specify multiline text use the "\n" sequence to separate lines.

Changing Interface Language Dynamically

The second approach allows switching languages dynamically, i.e. you can change them depending on the user's choice.

Suppose, you want to have Image Uploader translated both into English and Portuguese. Then you need to do the following:

  1. Take the iuembed.Localization_en.js file from the Scripts folder of the Image Uploader SDK installation folder and copy it to your server. This file contains an English localization of Image Uploader GUI.
  2. Create the iuembed.Localization_pt.js file and put it into the same folder where the iuembed.Localization_en.js file is saved. The file should be in UTF-8.
  3. Add the pt_resources object which exposes the following members:
    • addParams method applies the translation. This method should be inherited from the IULocalization class defined in the iuembed.js file.
    • Language property specifies a translation language.
    • ImageUploader property represents a collection of ImageUploader text parameters and corresponding values.
    Here is a simplified example of this file:

    JavaScript

    //iuembed.Localization_pt.js
    pt_resources = {
    
    	addParams : IULocalization.addParams,
    
    	Language : "Portuguese",
    
    	ImageUploader : {	
    
    		//translation of ImageUploader text parameters to Portuguese
    		//... other translations
    		MinutesText : "minutos",
    		SecondsText : "segundos"
    	}
    }
    You may base your translation on the iuembed.Localization_en.js file.
  4. Link all necessary resource files (e.g. iuembed.Localization_en.js and iuembed.Localization_pt.js) with the default.aspx file.
  5. Edit the default.aspx file as follows:
    • Add a new option to the dropdown menu. This option will correspond to the Portuguese language.

      HTML

      <html>
      <head>
      	<script src="iuembed.Localization_en.js" type="text/javascript">  </script>
      	<script src="iuembed.Localization_pt.js" type="text/javascript">  </script>
      	<!--... Other files with translations ...-->
      </head>
      <body>
      	<!--... Omitted for brevity ...-->
      	<select id="SelectLanguage" onchange="SelectLanguage_change();"
      		NAME="SelectLanguage">
      			<option value="en" selected="selected">[en] - English</option>
      			<option value="pt">[pt] - Portuguese</option>
      			<!--... Other languages ... -->
      	</select>
      	<!--... Omitted for brevity ...-->
      </body>
      </html>
    • Add code for loading your translation when Portuguese is selected.

      JavaScript

      <script src="../iuembed.js" type="text/javascript">  </script>
      <script type="text/javascript">
      //<![CDATA[
      var iu = new ImageUploaderWriter("ImageUploader1", 650, 500);
      //... Omitted for brevity ...
      
      switch (lang) {
      	//The value in the case statement should be the same as in the
      	//value attribute of the OPTION element for this language, hence,
      	//here "pt" is used
      	case "pt":
      		pt_resources.addParams(iu);
      		break;
      	//... Cases of other languages
      }
      
      //... Omitted for brevity ...
      </script>
      

You can use enclosed translations into the following languages:

  • Chinese (simplified)
  • Chinese (traditional)
  • Czech
  • Dutch
  • English
  • French
  • German
  • Italian
  • Japanese
  • Korean
  • Norwegian
  • Russian
  • Swedish
  • Turkish
  • Ukrainian