Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

HOWTO: Host several Image Uploader controls on one page

Options
Go to last post Go to first unread
Previous Topic Next Topic
Fedor  
#1 Posted : Thursday, November 25, 2004 6:00:00 AM(UTC)
Fedor

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,660

Thanks: 5 times
Was thanked: 76 time(s) in 74 post(s)
Description

Sometimes it is necessary to host several Image Uploader controls on one page. In this case the main problem is that each control uploads data independently. User have to hit Send button and see upload progress dialog for each uploader.

Solution

To resolve this problem, we should implement custom progress bar and custom Send button. To make illusion to user that single request is uploaded, we handle Progress event and start uploading of next uploader when the current uploader successfully finished submitting its files. The code sample below demonstrates how to implement it.

Code:
<html>
  <head>
    <title>Aurigma Image Uploader</title>
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <link href="Style.css" type="text/css" rel="stylesheet">
    <script>
//Count of Image Uploaders on page
var CONTROL_COUNT = 4;

//Max width of progress bar 
var PROGRESS_BAR_WIDTH = 200;

//Current uploaded control
var iCurrentControl;  

function startUpload()
{
  //Hide table with uploaders

  document.getElementById("TableUploaders").style.display = "none";
  //Show table with progress bar

  document.getElementById("TableProgress").style.display = "block";
  //Show progress bar text label

  document.getElementById("ProgressBarText").innerText = "Uploading..."
  //Set width of progress bar to 0 pixels
  document.getElementById("ProgressBar").style.width = "0px";

  //Hide upload button
  document.getElementById("ButtonUpload").style.display = "none";

  //Show cancel button
  document.getElementById("ButtonCancel").style.display = "block";

  
  //Set index of current Image Uploader to 0
  iCurrentControl = 0;
  cancelOrError = false;

  upload();
}

//Process upload for next Image Uploader
function upload()

{  
  //Increase current control index
  iCurrentControl = iCurrentControl + 1;
  //Check whether last uploader finished uploading

  if (iCurrentControl>CONTROL_COUNT)
  {
    //Make final action of the upload
    successUpload();

  }
  else
  {
    //check whether something is selected for uploading; if not, just skip this uploader
    var oImageUploader = document.getElementById("ImageUploader" + iCurrentControl);

    if (oImageUploader.UploadFileCount>0)
    {
      oImageUploader.Send();

    }
    else
    {
      upload();
    }

  }
}

//After all data was sent successfully, let's perform the final action
//(in our case it is redirection to another page).
function successUpload()
{

  //Redirect to another page
  window.location.href = "PictureGallery.asp"
}

//If some of uploaders fail, handle this situation

function errorUpload()
{
  //Show table with uploaders
  document.getElementById("TableUploaders").style.display = "block";

  //Hide table with progress bar
  document.getElementById("TableProgress").style.display = "none";

  //Show upload button
  document.getElementById("ButtonUpload").style.display = "block";

  //Hide cancel button
  document.getElementById("ButtonCancel").style.display = "none";

  alert("Error occurred during upload");
}

function cancelUpload()
{

  document.getElementById("ImageUploader" + iCurrentControl).Stop();;

  //Show table with uploaders
  document.getElementById("TableUploaders").style.display = "block";

  //Hide table with progress bar
  document.getElementById("TableProgress").style.display = "none";

  //Show upload button
  document.getElementById("ButtonUpload").style.display = "block";

  //Hide cancel button
  document.getElementById("ButtonCancel").style.display = "none";

  alert("The upload was canceled");
}

//Display progress bar
function progress(Status, Progress, ValueMax, Value, StatusText)

{
  var oProgresBar = document.getElementById("ProgressBar");
  var oProgresBarText = document.getElementById("ProgressBarText");  
  switch(Status)

  {
    case "START":
      //Do nothing
      break;
    case "PREPARE":

      var position = (iCurrentControl-1)/CONTROL_COUNT*100+Value/ValueMax*100/CONTROL_COUNT/2;

      //Show preparing progress 
      oProgresBarText.innerText = Status+" "+Math.round(position)+"%";

      //Set width of progress bar 
      oProgresBar.style.width = Math.round(position*2)+"px";

      break;
    case "UPLOAD":      
      var position = (iCurrentControl-0.5)/CONTROL_COUNT*100+Value/ValueMax*100/CONTROL_COUNT/2;

      //Show upload progress 
      oProgresBarText.innerText = Status+" "+Math.round(position)+"%";

      //Set width of progress bar 
      oProgresBar.style.width = Math.round(position*2)+"px";

      break;
    case "COMPLETE":
      //Process upload of next control      
      upload();

      break;
    case "CANCEL":
      //Do nothing (cancelUpload is already called in Cancel button click handler)
      break;

    case "ERROR":
      //Some error arised. Call errorUpload function to handle it.
      errorUpload();
      break;

  }
}
    </script>    
    <script for="ImageUploader1" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);

    </script>    
    <script for="ImageUploader2" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);

    </script>    
    <script for="ImageUploader3" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);

    </script>    
    <script for="ImageUploader4" event="Progress(Status, Progress, ValueMax, Value, StatusText)">
progress(Status, Progress, ValueMax, Value, StatusText);

    </script>        
  </head>
  <body bgcolor="#C3DAF9">
    <input id="ButtonUpload" name="ButtonUpload" type="Button" value="Upload" onclick="startUpload();">

    <input id="ButtonCancel" name="ButtonCancel" type="Button" value="Cancel" onclick="cancelUpload();" style="display:none">

    <table cellpadding="0" cellspacing="0" border="0" width="440" height="440" ID="TableProgress" style="display:none">    
      <tr>

        <td align="center" valign="middle">
          <table>
            <tr>

              <td width="200">
                <span id="ProgressBarText"></span>
                <br>

                <div id="ProgressBar" style="width:0px;height:20px;background-color:blue;"></div>
              </td>

            </tr>
          </table>
        </td>
      </tr>
    </table>

    <table cellpadding="0" cellspacing="0" border="0" width="440" ID="TableUploaders">    
      <tr>

        <td align="center" width="220">
          <b>Image Uploader #1</b>

        </td>
        <td align="center" width="220">
          <b>Image Uploader #2</b>

        </td>
      </tr>      
      <tr>
        <td width="220">

          <object type="application/x-oleobject" 
            classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220" 
            CodeBase="../ImageUploader2.cab" id="ImageUploader1" name="ImageUploader1" VIEWASTEXT>

            <param name="Layout" value="OnePane">
            <param name="UploadView" value="Thumbnails">            
            <param name="ShowButtons" value="False">

            <param name="ShowStatusPane" value="False">
            <param name="ShowDescriptions" value="False">

            <param name="EnableRotate" value="False">
            <param name="PreviewThumbnailSize" value="65">            
            <param name="SilentMode" value="True">            
            <param name="Action" value="Upload.asp?delete=true">

          </object>          
        </td>
        <td width="220">
          <object type="application/x-oleobject" 
            classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220" 
            CodeBase="../ImageUploader2.cab" id="ImageUploader2" name="ImageUploader2" VIEWASTEXT>

            <param name="Layout" value="OnePane">
            <param name="UploadView" value="Thumbnails">            
            <param name="ShowButtons" value="False">

            <param name="ShowStatusPane" value="False">
            <param name="ShowDescriptions" value="False">

            <param name="EnableRotate" value="False">
            <param name="PreviewThumbnailSize" value="65">

            <param name="SilentMode" value="True">                        
            <param name="Action" value="Upload.asp">

          </object>          
        </td>
      </tr>
      <tr>
        <td align="center" width="220">

          <b>Image Uploader #3</b>
        </td>
        <td align="center" width="220">

          <b>Image Uploader #4</b>
        </td>
      </tr>      
      <tr>

        <td width="220">
          <object type="application/x-oleobject" 
            classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220" 
            CodeBase="../ImageUploader2.cab" id="ImageUploader3" name="ImageUploader3" VIEWASTEXT>

            <param name="Layout" value="OnePane">
            <param name="UploadView" value="Thumbnails">            
            <param name="ShowButtons" value="False">

            <param name="ShowStatusPane" value="False">
            <param name="ShowDescriptions" value="False">

            <param name="EnableRotate" value="False">
            <param name="PreviewThumbnailSize" value="65">                                  
            <param name="SilentMode" value="True">            
            <param name="Action" value="Upload.asp">

          </object>          
        </td>
        <td width="220">
          <object type="application/x-oleobject" 
            classid="clsid:FD18DD5E-B398-452A-B22A-B54636BA9F0D" width="220" height="220" 
            CodeBase="../ImageUploader2.cab" id="ImageUploader4" name="ImageUploader4" VIEWASTEXT>

            <param name="Layout" value="OnePane">
            <param name="UploadView" value="Thumbnails">            
            <param name="ShowButtons" value="False">

            <param name="ShowStatusPane" value="False">
            <param name="ShowDescriptions" value="False">

            <param name="EnableRotate" value="False">
            <param name="PreviewThumbnailSize" value="65">                                  
            <param name="SilentMode" value="True">            
            <param name="Action" value="Upload.asp">
          </object>          
        </td>
      </tr>
    </table>  
  </body>
</html>

Best regards,

Fedor Skvortsov
Back to top
Fedor  
#2 Posted : Sunday, December 30, 2007 4:19:43 AM(UTC)
Fedor

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,660

Thanks: 5 times
Was thanked: 76 time(s) in 74 post(s)
This post is out of date. We use 5.0 version right now.
Best regards,

Fedor Skvortsov
Back to top
Fedor  
#3 Posted : Sunday, December 30, 2007 1:01:19 PM(UTC)
Fedor

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,660

Thanks: 5 times
Was thanked: 76 time(s) in 74 post(s)
Well, I hope that this topic is useless already, as we have version 5.0 already. :)

We also use iuembed.js syntax right now to place Image Uploader on page.

Best regards,

Fedor Skvortsov
Back to top
Hakon  
#4 Posted : Sunday, May 18, 2008 8:54:30 AM(UTC)
Hakon

Rank: Newbie

Groups: Member
Joined: 5/18/2008(UTC)
Posts: 1
Could you please show how you would do this with version 5.0?
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Powered by YAF.NET 2.2.3 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.964 seconds.