Codebehind Progress Bar    

This example shows how to integrate an upload with progress bar into a codebehind page. It assumes you are using Visual Studio.

 

    
1
 
Add Reference    
     

Add a reference to ABCUpload .NET (ABCUpload5).

You can do this by right clicking on the 'References' folder of your project and choosing Add Reference. You will find ABCUpload5 near the top of the '.NET Tab'.

If you do not add a reference to ABCUpload .NET you will not be able to use the ABCUpload classes in your project.

 

    
2
 
Progress Module    
     

Add the ABCUpload Progress Module to your web.config.

The configuration section you need to add is shown below in red. If you do not add this or if you put it in the wrong location then the progress bar may launch but it will not update or close.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>

    <httpModules>
      <add name="Progress" type="WebSupergoo.ABCUpload5.ProgressModule, ABCUpload5, Version=5.3.0.0, Culture=neutral, PublicKeyToken=1f89539196ce5fbf"/>
    </httpModules>

    ..... more configuration settings

Please note that there are other settings which you will probably want to change as well. These are detailed in the web.config section of the documentation. However this can be left until after the basic example has been implemented and tested.

 

    
3
 
Create File Upload Form    
     

Choose 'Add Web Form...' from the 'Project' menu.

Add a file input field and submit button to your form. The easiest way to do this is to drag these two controls out of the Toolbox window and drop them onto the page.

You will find the 'Button' control on the 'Web Forms' section of the Toolbox.

You will find the 'File Field' control on the 'HTML' section of the Toolbox.

Right click on the file input control, get the properties and assign it a name. For the purposes of this example we'll assume you've given it the name 'myfile'.

If you don't have a file input element you will not be able to select any files. If you don't have a submit button there will be no obvious way to submit the upload. If your file field does not have a name you will not be able to easily reference it when you need to save your uploaded file.

 

   
4
 
Check File Upload Form    
     

Click on the HTML Tab for your aspx form and check that multipart form encoding is being used. Check also that you have set the name of the file input field correctly.

The attributes you need to check are shown below in red. If they are not present or correct you should add or change them.

If the encoding type is not set to multipart then no files will be uploaded when the form is submitted. If the field name is wrong then your code will not be able to reference the uploaded file.

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>WebForm1</title>
        <meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    </HEAD>
    <body ms_positioning="GridLayout">
        <form id="Form1" method="post" encType="multipart/form-data" runat="server">
            <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 197px; POSITION: absolute; TOP: 69px" runat="server" Text="Button"></asp:Button>
            <INPUT style="Z-INDEX: 102; LEFT: 35px; POSITION: absolute; TOP: 22px" type="file" name="myfile"></form>
    </body>
</HTML>

 

    
5
 
Add Codebehind to File Upload Form    
     

Double click on the submit button to bring up the codebehind page.

You will need to add the ABCUpload namespace.

You will need to add code to register the progress bar when the page is loaded and to save the file when the submit button is clicked.

The sections you need to add are shown below in red.

[C#]
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using WebSupergoo.ABCUpload5;

namespace WebApplication1
{
    /// <summary>
    /// Summary description for WebForm1.
    /// </summary>
    public class WebForm1 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.Button Button1;

        private void Page_Load(object sender, System.EventArgs e)
        {
            if (!IsClientScriptBlockRegistered("DoUpload")) {
                string theScript = "\r\n";
                theScript += "<script language=JavaScript>\r\n";
                theScript += "<!--\r\n";
                theScript += "function DoUpload(inForm) {\r\n";
                theScript += " if ((typeof(Page_BlockSubmit) == 'boolean') && (Page_BlockSubmit == true)) return;\r\n";
                theScript += " theFeats = 'height=160,width=600,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no';\r\n";
                theScript += " theUniqueID = Math.floor(Math.random() * 1000000) * ((new Date()).getTime() % 1000);\r\n";
                theScript += " window.open('progressbar.aspx?ProgressID=' + theUniqueID, theUniqueID, theFeats);\r\n";
                theScript += " thePos = inForm.action.indexOf('?');\r\n";
                theScript += " if (thePos >= 0)\r\n";
                theScript += " inForm.action = inForm.action.substring(0, thePos);\r\n";
                theScript += " inForm.action += '?UploadID=' + theUniqueID;\r\n";
                theScript += " inForm.submit();\r\n";
                theScript += "}\r\n";
                theScript += "//-->\r\n";
                theScript += "</script>\r\n";
                RegisterClientScriptBlock("DoUpload", theScript);
            }
            RegisterOnSubmitStatement("submit", "DoUpload(this);");
        }

        Web Form Designer generated code

        private void Button1_Click(object sender, System.EventArgs e) {
            Upload theUpload = new Upload();
            UploadedFile theFile = theUpload.Files["myfile"];
            if ((theFile != null) && (theFile.ContentLength > 0))
                theFile.SaveAs(theFile.WinSafeFileName);
        }
    }
}

[VB]
Imports WebSupergoo.ABCUpload5

Public Class WebForm1
    Inherits System.Web.UI.Page

Web Form Designer generated code

        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            If IsClientScriptBlockRegistered("DoUpload") = False Then
                Dim sc As String = vbCrLf
                sc = sc + "<script language=JavaScript>" + vbCrLf
                sc = sc + "<!--" + vbCrLf
                sc = sc + "function DoUpload(inForm) {" + vbCrLf
                sc = sc + " if ((typeof(Page_BlockSubmit) == 'boolean') && (Page_BlockSubmit == true)) return;" + vbCrLf
                sc = sc + " theFeats = 'height=160,width=600,location=no,menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no';" + vbCrLf
                sc = sc + " theUniqueID = Math.floor(Math.random() * 1000000) * ((new Date()).getTime() % 1000);" + vbCrLf
                sc = sc + " window.open('progressbar.aspx?ProgressID=' + theUniqueID, theUniqueID, theFeats);" + vbCrLf
                sc = sc + " thePos = inForm.action.indexOf('?');" + vbCrLf
                sc = sc + " if (thePos >= 0)" + vbCrLf
                sc = sc + " inForm.action = inForm.action.substring(0, thePos);" + vbCrLf
                sc = sc + " inForm.action += '?UploadID=' + theUniqueID;" + vbCrLf
                sc = sc + " inForm.submit();" + vbCrLf
                sc = sc + "}" + vbCrLf
                sc = sc + "//-->" + vbCrLf
                sc = sc + "</script>" + vbCrLf
                RegisterClientScriptBlock("DoUpload", sc)
            End If
            RegisterOnSubmitStatement("submit", "DoUpload(this);")
        End Sub

        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
            Dim theUpload As Upload = new Upload()
            Dim theFile As UploadedFile = theUpload.Files("myfile")
            If Not theFile Is Nothing And theFile.ContentLength > 0 Then
                theFile.SaveAs(theFile.WinSafeFileName)
            End If
        End Sub
End Class

    
6
 
Add Progress Bar Design    
     

We need to add a progress bar page.

Choose 'Add Web Form..' from the Project menu. Name the form progressbar.aspx.

We need to insert the design for the form. Click on the HTML tab and insert the new head and body content as shown in red.

<%@ Page language="c#" Codebehind="progressbar.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.progressbar" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
 <head>
  <title>Progress...</title>
  <meta http-equiv="expires" content="Tue, 01 Jan 1981 01:00:00 GMT">
  <% = Meta %>
  <script language="javascript">
  <!--
  if (<% = Percent %> >= 100) top.close();
  //-->
  </script>
 </head>
 <body bgcolor="#cccccc">
  <table border="0" width="100%">
   <tr>
    <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Uploading:</b></font></td>
   </tr>
   <tr bgcolor="#999999">
    <td>
     <table border="0" width="<% = Percent %>%" cellspacing="1" bgcolor="#0033ff">
      <tr><td><font size="1">&nbsp;</font></td></tr>
     </table>
    </td>
   </tr>
   <tr>
    <td>
     <table border="0" width="100%">
      <tr>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Estimated&nbsp;Time&nbsp;Left:</font></td>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><% = State %></font>
       </td>
      </tr>
      <tr>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Transfer&nbsp;Rate:</font></td>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><% = Kbps %> KB/sec</font></td>
      </tr>
      <tr>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Information:</font></td>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><% = Note %></font></td>
      </tr>
      <tr>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Uploading&nbsp;File:</font></td>
       <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><% = FileName %></font></td>
      </tr>
     </table>
    </td>
   </tr>
   <tr>
   </tr>
  </table>
 </body>
</html>

 

    
7
 
Add Progress Bar Code    
     

Next we need to insert the code to populate the page with data.

Open the codebehind for the progressbar.aspx file.

The sections you need to add are shown below in red.

[C#]
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using WebSupergoo.ABCUpload5;

namespace WebApplication1
{
    /// <summary>
    /// Summary description for progressbar.
    /// </summary>
    public class progressbar : System.Web.UI.Page
    {
        protected string State;
        protected string Meta;
        protected string Percent;
        protected string Kbps;
        protected string Note;
        protected string FileName;
    
        private void Page_Load(object sender, System.EventArgs e) {
            Progress theProgress = new Progress(Request.QueryString["ProgressID"]);
            
            string theID = theProgress.ID.ToString();
            string theMins = ((int)theProgress.SecondsLeft / 60).ToString();
            string theSecs = ((int)theProgress.SecondsLeft % 60).ToString();
            Meta = "<meta http-equiv=\"refresh\" content=\"2,progressbar.aspx?ProgressID=" + theID + "\">";
            Percent = theProgress.PercentDone.ToString();
            Kbps = Math.Round(theProgress.BytesPerSecondCurrent / 1024, 1).ToString();
            string theKbdone = Math.Round((double)theProgress.BytesDone / 1024, 1).ToString();
            string theKbtotal = Math.Round((double)theProgress.BytesTotal / 1024, 1).ToString();
            Note = theProgress.Note;
            FileName = theProgress.FileName;
            if (theProgress.Finished) Meta = "";
            State = theMins + " min " + theSecs + " secs (" + theKbdone + " KB of " + theKbtotal + " KB uploaded)";
        }

        Web Form Designer generated code
    }
}

[VB]
Imports WebSupergoo.ABCUpload5

Public Class progressbar
    Inherits System.Web.UI.Page

Web Form Designer generated code

        Protected State As String
        Protected Meta As String
        Protected Percent As String
        Protected Kbps As String
        Protected Note As String
        Protected FileName As String
    
        Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Dim theProgress As Progress = New Progress(Request.QueryString("ProgressID"))
            
            Dim theID As String = theProgress.ID.ToString()
            Dim theMins As String = CInt(theProgress.SecondsLeft / 60).ToString()
            Dim theSecs As String = (CInt(theProgress.SecondsLeft) Mod 60).ToString()
            Meta = "<meta http-equiv=""refresh"" content=""2,progressbar.aspx?ProgressID=" + theID + """>"
            Percent = theProgress.PercentDone.ToString()
            Kbps = Math.Round(theProgress.BytesPerSecondCurrent / 1024, 1).ToString()
            Dim theKbdone As String = Math.Round(CDbl(theProgress.BytesDone) / 1024, 1).ToString()
            Dim theKbtotal As String = Math.Round(CDbl(theProgress.BytesTotal) / 1024, 1).ToString()
            Note = theProgress.Note
            FileName = theProgress.FileName
            If theProgress.Finished = True Then Meta = ""
            State = theMins + " min " + theSecs + " secs (" + theKbdone + " KB of " + theKbtotal + " KB uploaded)"
        End Sub

        Web Form Designer generated code
End Class

 

    
8
 
Test    
     

Finally set your main form as the startup page and run your project.

 

    
9
 
Notes    
     

ABCUpload will happily coexist with server side controls.

However be careful of anything that might require a server postback.

A postback is a form submission and if you have a file selected into a file input field then the entire file will have to be uploaded for this postback to occur.