1. Image Uploader 6.5 Dual
  2. Using Image Uploader
This documentation is for the old version. Go to the latest Upload Suite docs

Using Image Uploader Installation Progress

Usually it takes some time to download and install Image Uploader. Moreover, users have to perform additional actions to complete the installation of ActiveX control or Java applet, for instance, click the information bars and accept security warnings. It all may confuse users and they may consider Image Uploader as a security threat and cancel the installation process. Because of this fact the add-on should display additional information while installation is in progress and provide users with instructions.

Image Uploader enables this functionality displaying special screens instead of the ActiveX control or Java applet during two major phases: downloading and installation. The downloading screen is displayed when Image Uploader is being downloaded from server to client; it contains a wait indicator, short descriptions, and the other instructions. The installation screen is displayed after Image Uploader is completely downloaded; it provides the instructions on how to install the add-on.

This functionality is implemented in the InstallationProgressExtender class defined in the iuembed.InstallationProgress.js helper script file. So if you want to customize the screens described above you should perform the following steps:

  1. Link the iuembed.InstallationProgress.js file with your HTML page.

    JavaScript
    <script type="text/javascript" src="../iuembed.InstallationProgress.js"></script>

  2. Create a new instance of the InstallationProgressExtender class and pass the ImageUploaderWriter object to its constructor.

    JavaScript
    <script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader1", 600, 600);

//Configure Image Uploader

var ip = new InstallationProgressExtender(iu);

//Configure Image Uploader extender

iu.writeHtml();
</script>

  3. Configure downloading and installation screens. See the information below for more details.

The InstallationProgressExtender class includes a number of properties intended to configure these screens. All the properties can be divided in two groups according to the stage they appear on, except for one property. The setCommonHtml contains HTML-marked description of the ActiveX control displayed on both stages (downloading and installation). This description is intended to give users a brief explanation of what control is about to be installed.

Downloading Screen

This screen is useful in the case of slow Internet connection when downloading of the ActiveX control or Java applet may take long time. You can put a wait indicator here and tell users to be patient while Image Uploader is being loaded. You can use the following properties to configure this screen:

Image Uploader ActiveX

  • setProgressHtml(value) specifies the text saying that the downloading of the ActiveX control is in progress. Value defined in this property can contain {0} placeholder. Before displaying this screen, the placeholder is replaced with image URL defined in the setProgressImageUrl property (see the sample below). It allows you to customize images without changing HTML-marked text.
  • setProgressImageUrl(value) specifies a custom image to display instead of default wait indicator (see description of setProgressHtml above for additional details).
  • setBrowserTypeProgressHtml(value) specifies instructions depending on the browser type. The following properties are supported: setBeforeIE6XPSP2ProgressHtml, setIE6XPSP2ProgressHtml, setIE7ProgressHtml, and setIE8ProgressHtml. Since different versions of browsers have different workflows of downloading ActiveX controls you can use this set of properties to customize downloading instructions based on browser version Image Uploader is about to be installed on.
  • setProgressCssClass(value) specifies a CSS class name to apply it to the downloading screen. This class should be declared in a source code of the page Image Uploader is added to, or in the external CSS file linked to this page.
Downloading Screen Properties

Image Uploader Java

  • setJavaProgressHtml(value) specifies the text saying that the downloading of the Java applet is in progress. Value defined in this property can contain {0} placeholder. Before displaying this screen, the placeholder is replaced with image URL defined in the setProgressImageUrl property (see the sample below). It allows you to customize images without changing HTML-marked text.
  • setProgressImageUrl(value) specifies a custom image to display instead of default wait indicator (see description of setJavaProgressHtml above for additional details).
  • setProgressCssClass(value) specifies a CSS class name to apply it to the downloading screen. This class should be declared in a source code of the page Image Uploader is added to, or in the external CSS file linked to this page.
Downloading Screen Properties

The code sample below demonstrates how to configure this screen.

CSS
.DownloadingScreenStyle {background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;}
JavaScript
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader1", 600, 600);

//Configure Image Uploader

var ip = new InstallationProgressExtender(iu);

ip.setProgressHtml("<p><img src=\"{0}\" /><br />Loading Aurigma Image Uploader ActiveX...</p>");
ip.setProgressImageUrl("mywaitIndicator.gif");
ip.setBeforeIE6XPSP2ProgressHtml("<p>To install Image Uploader, please wait until the control will be loaded and click the" 
    + "<strong>Yes</strong> button when you see the installation dialog.</p>");
ip.setIE6XPSP2ProgressHtml("<p>Please wait until the control will be loaded.</p>");
ip.setIE7ProgressHtml("<p>Please wait until the control will be loaded.</p>");
ip.setIE8ProgressHtml("<p>Please wait until the control will be loaded.</p>");
ip.setJavaProgressHtml("<p><img src=\"{0}\" /><br />Loading Aurigma Image Uploader Java Applet...</p>");
ip.setProgressCssClass("DownloadingScreenStyle");

iu.writeHtml();
</script>

Installation Screen

Installation phase starts after Image Uploader is completely downloaded. In the case of the ActiveX control installation, the corresponded screen is shown when the security warning is about to be displayed. Thus, you can use it to provide users with the instructions on how to install the ActiveX control or describe an alternative way to install it (e.g. use a standalone installer) in the case if there are installation problems. As for the Java applet, it starts as soon as it is loaded. However, if it fails during the installation (JRE 1.5 is not installed or Java applets are disabled in a browser) this screen appears to provide users with instructions on how to setup Java and turn it on.

Image Uploader ActiveX

  • setBrowserTypeInstructionsHtml(value) specifies common instructions on ActiveX control installation depending on the client browser. The following properties are supported: setBeforeIE6XPSP2InstructionsHtml, setIE6XPSP2InstructionsHtml, setIE7InstructionsHtml, and setIE8InstructionsHtml. Since different versions of browsers have different workflows of installing ActiveX controls you can use this set of properties to customize installation instructions based on browser version Image Uploader is about to be installed on.
  • setInstructionsCssClass(value) specifies a CSS class name to apply it to the installation screen. This class should be declared in a source code of the page Image Uploader is added to, or in the external CSS file linked to this page.
  • setAltInstallerEnabled(value) specifies whether to display instructions on how to install Image Uploader in an alternative way (e.g. use a standalone installer).
  • setAltInstallerHtml(value) specifies a HTML-marked text appended to installation instructions in the case if alternative installer is enabled. Value defined in this property can contain {0} placeholder. Before displaying this screen, the placeholder is replaced with a URL defined in the setAltInstallerUrl property (see the sample below). It allows you to customize links without changing HTML-marked text.
  • setAltInstallerUrl(value) specifies a custom link to an alternative installer (see description of setAltInstallerHtml above for additional details).
  • setUpdateInstructions(value) specifies common instructions on how to update ActiveX control. This property appears if an earlier version of Image Uploader ActiveX control is already installed on the client machine and needed to be updated.
Installation Screen Properties

Image Uploader Java

  • setCommonInstallJavaHtml(value) specifies common instructions on Java applet installation.
  • setBrowserTypeInstallJavaHtml(value) specifies Java applet installation instructions depending on the client browser. The following properties are supported: setBeforeIE6XPSP2InstallJavaHtml, setIE6XPSP2InstallJavaHtml, setIE7InstallJavaHtml, setIE8InstallJavaHtml, setMacInstallJavaHtml, and setMiscBrowsersInstallJavaHtml. Since different browsers have different workflows of installing Java applets you can use this set of properties to customize installation instructions based on browser type Image Uploader is about to be installed on.
  • setInstructionsCssClass(value) specifies a CSS class name to apply it to the installation screen. This class should be declared in a source code of the page Image Uploader is added to, or in the external CSS file linked to this page.
Installation Screen Properties

The following code sample demonstrates how to configure this screen.

CSS
.InstallationScreenStyle {background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;}
JavaScript
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader1", 600, 600);

//Configure Image Uploader

var ip = new InstallationProgressExtender(iu);

ip.setCommonInstallJavaHtml("<p>You need to install Java for running Image Uploader.</p>");
ip.setBeforeIE6XPSP2InstructionsHtml("<p>To install Image Uploader, please reload the page and click "
    + "the <strong>Yes</strong> button when you see the control installation dialog. "
    + "If you don't see installation dialog please check your security settings.</p>");
ip.setIE6XPSP2InstructionsHtml("<p>To install Image Uploader, please click on the <strong>Information Bar</strong> and select " 
    + "<strong>Install ActiveX Control</strong> from the dropdown menu. After page reload click <strong>Install</strong> when "
    + "you see the control installation dialog. If you don't see Information Bar, please try to reload the page and/or check "
    + "your security settings.</p>");
ip.setIE7InstructionsHtml("<p>To install Image Uploader, please click on the <strong>Information Bar</strong> "
    + "and select <strong>Install ActiveX Control</strong> or <strong>Run ActiveX Control</strong> from the dropdown menu.</p>"
    + "<p>Then either click <strong>Run</strong> or after page reload click <strong>Install</strong> "
    + "when you see the control installation dialog. If you don't see Information Bar, please try to reload the page and/or "
    + "check your security settings.</p>");
ip.setIE8InstructionsHtml("<p>To install Image Uploader, please click on the <strong>Information Bar</strong> "
    + "and select <strong>Install This Add-on</strong> or <strong>Run Add-on</strong> from the dropdown menu.</p>"
    + "<p>Then either click <strong>Run</strong> or after page reload click <strong>Install</strong> "
    + "when you see the control installation dialog. If you don't see Information Bar, please try to reload the page and/or "
    + "check your security settings.</p>");
ip.setUpdateInstructions("You need to update Image Uploader ActiveX control. Click <strong>Install</strong> or "
    + "<strong>Run</strong> button when you see the control installation dialog. If you don't see installation dialog, please "
    + "try to reload the page.");
ip.setBeforeIE6XPSP2InstallJavaHtml("<p>To install Java, please reload the page and click the <strong>Yes</strong> button "
    + "when you see the control installation dialog. If you don't see installation dialog, please check your security "
    + "settings.</p>");
ip.setIE6XPSP2InstallJavaHtml("<p>To install Java, please click on the <strong>Information Bar</strong> and select "
    + "<strong>Install ActiveX Control</strong> from the dropdown menu. After page reload click <strong>Install</strong> "
    + "when you see the control installation dialog. If you don't see Information Bar, please try to reload the page "
    + "and/or check your security settings.</p>");
ip.setIE7InstallJavaHtml("<p>To install Java, please click on the <strong>Information Bar</strong> and select "
    + "<strong>Install ActiveX Control</strong> or <strong>Run ActiveX Control</strong> from the dropdown menu.</p>"
    + "<p>Then either click <strong>Run</strong> or after the page reload click <strong>Install</strong> when you see the "
    + "control installation dialog. If you don't see Information Bar, please try to reload the page and/or check your "
    + "security settings.</p>");
ip.setIE8InstallJavaHtml("<p>To install Java, please click on the <strong>Information Bar</strong> and select 
    + "<strong>Install This Add-on</strong> or <strong>Run Add-on</strong> from the dropdown menu.</p>"
    + "<p>Then either click <strong>Run</strong> or after the page reload click <strong>Install</strong> when you see the "
    + "control installation dialog. If you don't see Information Bar, please try to reload the page and/or check your "
    + "security settings.</p>");
ip.setMacInstallJavaHtml("<p>Use the <a href=\"http://support.apple.com/kb/HT1338\">Software Update</a> feature "
    + "(available on the Apple menu) to check that you have the most up-to-date version of Java for your Mac.</p>");
ip.setMiscBrowsersInstallJavaHtml("<p>Please <a href=\"http://www.java.com/en/download/\">download</a> and install Java.</p>");
ip.setInstructionsCssClass("InstallationScreenStyle");
ip.setAltInstallerEnabled(true);
ip.setAltInstallerHtml("<p>You can also download <a href=\"{0}\">standalone installator</a>.</p>");
ip.setAltInstallerUrl("http://mysite.com/standaloneInstaller/");

iu.writeHtml();
</script>

Both these screens can be configured using Image Uploader ASP.NET control or Image Uploader PHP library when it is used to embed Image Uploader into the page. See the Configuring Image Uploader ASP.NET Control or Configuring Image Uploader PHP article for the detailed information on how it can be done.

See Also

Reference

Manual