To embed Image Uploader to a page using Image Uploader embedding scripts library you should perform the following steps:
Here we will consider these steps in detail.
You can find iuembed.js in the Scripts folder of the Image Uploader SDK installation folder.
To embed the Image Uploader in the page, you need to do at least the following:
Here is a simple code snippet demonstrating this (it installs both versions of Image Uploader):
Do not confuse ImageUploaderWriter class from iuembed.js with ImageUploader control. Do not try to call any methods or properties of ImageUploader from ImageUploaderWriter and vice versa.
As you see, the ImageUploaderWriter constructor has three arguments: ID of the control (or applet), width, and height. You can change these values later using appropriate properties.
You can also configure other properties of the ImageUploaderWriter, for example choose which version to install: ActiveX, Java or both.
Full list of members can be found at the Helper Script Members topic.
Depending on your license, you may need only ActiveX version or only Java version or both of them (Dual). If you need to install only the ActiveX version or only the Java version, do one of the following:
If you need to install both versions at the same time, combine these code snippets removing the activeXControlEnabled and javaAppletEnabled instructions.
If it is necessary to verify what version of Image Uploader is used, use the getControlType method. The getActiveXInstalled method returns whether ActiveX version is already installed.
To initialize parameters of Image Uploader you should use the addParam method of the ImageUploaderWriter class instance before you call writeHtml.
The addParam method has two arguments: the name of the parameter and its value.
Here is a code example:
Keep in mind that some parameters are not available in both ActiveX and Java version. If you add a parameter that does not exist in some version of Image Uploader, it will be merely ignored by it. You can see information whether certain parameter is available in ActiveX or Java version in the properties reference.
It takes a while to download and install Image Uploader. After download completes, the browser requires the user to click an information bar and accept the security warning. It may be quite embarrassing for the user. They may misunderstand installation instructions and reject installation when security dialog pops up.
If this happens, displaying re-installation instructions is a good idea. Image Uploader embedding scripts library includes the InstallationProgressExtender class which enables this feature. This class is defined in the iuembed.InstallationProgress.js file and exposes a number of properties that allow you not only to specify text instructions, but also customize theirs appearance using CSS styles and put animated wait indicator. See the Using Image Uploader Installation Progress topic for the detailed information about this feature.
To add event handlers do the following:
This code snippet demonstrates how it should be looking like:
To remove some previously added event listeners use the removeEventListener method which accepts the same parameters as the addEventListener.
document.getElementById(id). However it will not work with certain browsers (in particular, Safari).
That is why iuembed.js script contains a special function -
getImageUploader. It has the single argument - ID of the control, which you get a reference
for (for example, specified when creating an instance of ImageUploaderWriter), and returns
a reference to the control or the applet.
Here is an example of usage:
var imageUploader1 = getImageUploader("ImageUploader1");
Sometimes you need to modify Image Uploader properties after initialization. The typical situation is when you need to change the view mode between detailed list and thumbnails using the HTML dropdown list.
To do it, you should get a reference to the ImageUploader control as described above, and modify the property value.
The syntax of runtime property modification is the following:
object.setPropertyName, where PropertyName is a name of the property as
specified in the properties reference.
To read a property value, use
object.getPropertyName property instead.
This code snippet demonstrates how to work with properties after initialization:
var imageUploader1 = getImageUploader("ImageUploader1"); imageUploader1.setUploadView(imageUploader1.getFolderView());
To call methods of ImageUploader, you should use the same approach as you use for properties: get a reference to the ImageUploader and call the method using the following syntax:
object.MethodName(argument1, argument2, ...),
where MethodName is a name of the method as specified in the
Here is a code example:
var imageUploader1 = getImageUploader("ImageUploader1"); imageUploader1.Send();
Quite often it is necessary to work with Image Uploader controls when you are sure that the page has been fully loaded and ActiveX control or Java applet has been completely created and initialized.
Although you might use the window.onload to determine whether ActiveX control is loaded, it will not work for Java applet. Java applets are loaded asynchronously, and when the window.onload event is raised, it is not guaranteed that the applet has been initialized.
That is why iuembed.js exposes the FullPageLoad
event, which is raised when the page is loaded and the control is completely ready to be used. To add handler for this event
use the addEventListener method with the
"FullPageLoad" event name
Image Uploader embedding scripts library makes development and debugging of Image Uploader embedding script easier. It supports Intellisense and shows warnings if Image Uploader has wrong configuration.
To enable Intellisense tooltips just link the iuembed.Intellisense.js file with your page. If so you will see tooltips for Image Uploader members when typing them in Visual Studio.
To make debugging more efficient iuembed.js exposes three debug levels:
To specify the debug level you can use the code below before creating the ImageUploaderWriter object.
IUCommon.debugLevel = 2;
If debug messages are enabled (the debug level is
2) you will get
warnings in the following cases:
It is recommended to use iuembed.Intellisense.js script and set the debug
level to greater than
0 value on the development stage only. Disable Intellisene and debug
messages on production application.
Image Uploader embedding scripts library includes the following predefined localizations:
Each localization is represented with a iuembed.Localization_X.js file, where X is a language code of this localization.
To apply localization to your Image Uploader you should perform the following steps:
To add you own localization just create a localization script analogous to existing ones. See the Localization topic for details.