1. Image Uploader 7.0.37
  2. Using Image Uploader
  3. Customizing User Interface
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 the control, 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. Because of this 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 control 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 InstallationProgressInstallationProgress (ASP.NET)InstallationProgress (PHP)installationProgress (JavaScript) class. It includes a number of properties intended to configure these screens. All the properties can be divided into two groups according to the stage they appear on, except for one property. The CommonHtmlCommonHtml (ASP.NET)CommonHtml (PHP)commonHtml (JavaScript) contains a HTML-marked description of Image Uploader 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 Image Uploader 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:

ProgressImageUrl ProgressHtml IE8ProgressHtml IE7ProgressHtml IE6XPSP2ProgressHtml BeforeIE6XPSP2ProgressHtml CommonHtml
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" tagprefix="aur" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Aurigma Image Uploader 7</title>
    <style type="text/css">.DownloadingScreenStyle {
        background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
       <aur:Uploader runat="server" ID="Uploader1" />
       <aur:InstallationProgress runat="server" TargetControlID="Uploader1"
          ProgressHtml="&lt;p&gt;&lt;img src=\&quot;{0}\&quot; /&gt;&lt;br /&gt;Loading Aurigma Image Uploader...&lt;/p&gt;"
          ProgressImageUrl="mywaitIndicator.gif"
          ProgressCssClass="DownloadingScreenStyle" />
    </form>
</body>
</html>
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Aurigma Image Uploader 7</title>
    <style type="text/css">.DownloadingScreenStyle {
        background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;
    }
    </style>
</head>
<body>
<?php 
require_once "ImageUploaderPHP/Uploader.class.php";
require_once "ImageUploaderPHP/InstallationProgress.class.php";

$uploader = new Uploader("Uploader1");

$ip = new InstallationProgress($uploader);
$ip->setProgressHtml("<p><img src=\"{0}\" /><br />Loading Aurigma Image Uploader...</p>");
$ip->setProgressImageUrl("mywaitIndicator.gif");
$ip->setProgressCssClass("DownloadingScreenStyle");

$uploader->render();
?>
</body>
</html>
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Aurigma Image Uploader 7</title>
        <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
        <script type="text/javascript" src="Scripts/aurigma.uploader.installationprogress.js">  </script>
        <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 u = $au.uploader({id: 'Uploader1',
            width: '640', height: '480',
            // other params
        });
        var ip = $au.installationProgress(u);
        ip.progressHtml('<p><img src=\"{0}\" /><br />Loading Aurigma Image Uploader...</p>');    
        ip.progressImageUrl('mywaitIndicator.gif');
        ip.progressCssClass('DownloadingScreenStyle');
        u.writeHtml();
        </script>
    </body>
</html>

Installation Screen

Installation phase starts after Image Uploader is completely downloaded. In the case of installation in Internet Explorer, 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 add-on or describe an alternative way (e.g. use a standalone installer) in the case if there are installation problems. As for non-Internet Explorer browsers, Image Uploader starts as soon as it is loaded. However, if it fails during the installation (Sun 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. The following properties can be used to configure this screen:

InstallJavaHtml UpdateInstructions AltInstallerHtml IE8InstructionsHtml IE7InstructionsHtml IE6XPSP2InstructionsHtml BeforeIE6XPSP2InstructionsHtml CommonHtml MacInstallJavaHtml
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" tagprefix="aur" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Aurigma Image Uploader 7</title>
    <style type="text/css">.InstallationScreenStyle {
        background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
       <aur:Uploader runat="server" ID="Uploader1" />
       <aur:InstallationProgress runat="server" TargetControlID="Uploader1"
          AltInstallerHtml="&lt;p&gt;You can also download &lt;a href=&quot;http://mysite.com/standaloneInstaller/&quot;&gt;
            standalone installator&lt;/a&gt;.&lt;/p&gt;"
          InstructionsCssClass="InstallationScreenStyle" />
    </form>
</body>
</html>
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Aurigma Image Uploader 7</title>
    <style type="text/css">.InstallationScreenStyle {
        background-color:#ffffff;font-family:verdana;font-size:11px;padding:10px;text-align:center;
    }
    </style>
</head>
<body>
<?php 
require_once "ImageUploaderPHP/Uploader.class.php";
require_once "ImageUploaderPHP/InstallationProgress.class.php";

$uploader = new Uploader("Uploader1");

$ip = new InstallationProgress($uploader);
$ip->setAltInstallerHtml("<p>You can also download <a href=\"http://mysite.com/standaloneInstaller/\">
   standalone installator</a>.</p>");
$ip->setInstructionsCssClass("InstallationScreenStyle");

$uploader->render();
?>
</body>
</html>
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Aurigma Image Uploader 7</title>
        <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
        <script type="text/javascript" src="Scripts/aurigma.uploader.installationprogress.js">  </script>
        <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 u = $au.uploader({id: 'Uploader1',
            width: '640', height: '480',
            // other params
        });
        var ip = $au.installationProgress(u);
        ip.altInstallerHtml('<p>You can also download <a href="http://mysite.com/standaloneInstaller/">'
            + 'standalone installator</a>.</p>');
        ip.instructionsCssClass('InstallationScreenStyle');
        u.writeHtml();
        </script>
    </body>
</html>

See Also

Reference

Manual