Aurigma Image Uploader 6.1 Dual
Using Image Uploader ActiveX Installation Progress
See Also

Usually it takes some time to download and install ActiveX version of Image Uploader. Moreover, users have to perform additional actions to complete the installation of ActiveX controls, 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 control 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 during two major phases: downloading and installation. The downloading screen is displayed when the control is being downloaded from server to client, it contains a wait indicator, short Image Uploader descriptions, and the other instructions. The installation screen is displayed after the control is completely downloaded and security dialog is displayed in Internet Explorer, the screen provides the instructions how to install the control.

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 | Copy Code
   --- | ---
       <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 | Copy Code
   --- | ---
       <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. The major one is setCommonHtml property containing HTML-marked description of the control displayed on the both stages (downloading and installation). This description is intended to give users a brief explanation of what control is about to be installed. All other properties can be divided in two groups according to the stage they appear on.

# Downloading Screen

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

- setProgressHtml(value) specifies the text saying that the downloading 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 descritpion 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.

The code sample below demonstrates how to configure this screen.

JavaScript | Copy Code
--- | ---
    <head>
        <style type="text/css">
            .DownloadingScreenStyle {background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;}
        </style>
    </head>
    <body>
        <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.setProgressCssClass("DownloadingScreenStyle");

        iu.writeHtml();
        </script>
    </body>

# Installation Screen

This screen is displayed after the control is completely downloaded and installation security warning is about to be displayed. You can use this screen to provide users with the instructions how to install the ActiveX control. In addition, you can describe an alternative way to install the ActiveX control (e.g. use a standalone installer) in the case if there are installation problems.

- setBrowserTypeInstructionsHtml(value) specifies common installation instructions 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 descritpion of setAltInstallerHtml above for additional details).

The following code sample demonstrates how to configure this screen.

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

        //Configure Image Uploader

        var ip = new InstallationProgressExtender(iu);

        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.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>
    </body>

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

# See Also

##### Manual

Image Uploader Embedding Scripts Library Reference
Inserting Image Uploader into Web Page
Configuring Image Uploader ASP.NET Control
Configuring Image Uploader PHP