To make Image Uploader easier to use by 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:
- Simply add each property when initializing ImageUploaderWriter.
- Put all properties in a separate language file and use it when needed.
Changing Interface Language Statically
In the first case, necessary text properties with translation are added just like any other Image Uploader property. You also need to add three text properties of ImageUploaderWriter itselft:
- instructionsCommon specifies a common part of installation instructions.
- instructionsWinXPSP2 specifies a part of installation instructions that is intended for the Windows XP SP 2 platform.
- instructionsNotWinXPSP2 specifies a part of installation instructions that is intended for other platforms.
JavaScript | ![]() |
---|---|
<script type="text/javascript" src="iuembed.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 //ImageUploaderWriter text properties iu.instructionsWinXPSP2 = "please click on the Information Bar. After page " + "reload click \"Yes\" when you see the control installation dialog."; //...more ImageUploaderWriter text properties //...Other params and event handlers iu.writeHtml(); </script> |
![]() |
---|
Pay attention to the differences in syntax when localizing ImageUploader and ImageUploaderWriter 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 partucular placeholders.
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:
- Take the Localization Sample as a base and copy it to your Web server.
- Create the pt.js file an put it into the Resources folder. The file should be in UTF-8.
- Add the pt_resources object with a single function that applies the
translation into this file. This function will take the ImageUploaderWriter object as a parameter. You may base your translation on the
en.js file.
JavaScript Copy Code
//pt.js var pt_resources={addParams:function(iu){ }}
- Add the body of the addParams function where you initialize all
necessary properties (you need to localize both ImageUploader and ImageUploaderWriter properties).
JavaScript Copy Code
//pt.js var pt_resources={addParams:function(iu){ iu.addParam("DescriptionEditorButtonOkText", "OK"); //... }}
- Link all necessary resource files (e.g. pt.js and en.js) with the default.aspx file.
- Edit the default.aspx file as follows:
- Add a new option to the dropdown menu. This option will correspond to the Portuguese
language.
JavaScript Copy Code
<html> <head> <script src="Resources/en.js" type="text/javascript"></script> <script src="Resources/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 Copy Code
<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>
- Add a new option to the dropdown menu. This option will correspond to the Portuguese
language.
You can use enclosed translations into the following languages:
- Chinese (simplified)
- Chinese (traditional)
- English
- French
- German
- Italian
- Norwegian
- Russian
- Swedish
- Ukrainian