This sample builds on the concepts taught in the "Getting Started" chapter, in the
example, "A Simple Upload in ASP.NET". It assumes that you already understand how
to configure your application and that you know how to perform at least a simple
upload.
FileUp includes a server-side progress indicator that can be displayed to the user
using HTML. The server-side progress indicator lets you know how much of the entire
upload has arrived at the server. In an upload from the browser to an ASP.NET page,
include the progress indicator in a separate page. In this page, you can get and
display to the user:
The Percentageof the upload that has reached the server.
You can use HTML techniques to customize the output effect, and display a counter
or a progress bar.
Progress Indication in ASP.NET
Under ASP.NET, FileUp's progress indication is handled by the
HttpModule. Therefore, to display accurate progress indication in ASP.NET,
upload to a file with the .uplx extension.
Example
The complete code for the following example is available in the "Progress Indicator"
sample included in the "FileUp/Samples/UploadSamples" installation directory. This
sample contains the following pages:
Page Name
Function
ProgressUpload.uplx
Contains the display HTML for the form and will display the response. Also responsible
for opening the progress indicator window.
ProgressUpload.uplx.[vb|cs]
Code-behind of ProgressUpload.uplx: Contains the logic that will accept the request
on the server, save out the files and coordinate progress indication.
ProgressIndicator.aspx
Contains the display HTML for the progress indicator.
ProgressIndicator.aspx.[vb|cs]
Code-behind for ProgressIndicator.aspx: Instantiates the FileUp Progress Indicator
object and provides logic for progress indication display.
There are 5 steps to this process:
Obtain a ProgressID on the Server before rendering the HTML for the upload form.
Provide the HTML form as usual, but attach a script to start progress on the "onsubmit"
event of the form.
Provide a graphical representation of progress with HTML.
Provide the logic to drive the progress display in the code-behind[ProgressIndicator.aspx.[vb|cs]
of the Progress Indicator page.
Set up ProgressUpload.uplx.[vb|cs] to synchronize with the progress indicator before
parsing the request.
Step One: Obtain a ProgressID on the Server before rendering the HTML for the upload
form.
A Progress ID must be obtained from the FileUp Progress Indicator object as the
first step to an upload request that will provide progress indication. This Progress
ID will be used to synchronize the progress indication display code and the FileUp
upload processing code, even though they exist in separate pages, on separate threads.
This progress ID must be obtained from the Progress Indicator object's NextProgressId()
function. It should not be "set" as a value in any other way (do not provide your
own values). The progress indicator provides an identifier to distinguish a particular
upload's progress indication from any other progress indication occuring in other
upload requests being handled by FileUp on the same webserver.
In the code behind of ProgressUpload.uplx, instantiate the FileUp Progress object
on the Page_Load event.
C#
protected void Page_Load(object sender, EventArgs e)
{
//--- When the page is first loaded, generate a new progress id
if (!Page.IsPostBack)
{
//--- FileUpProgress.NextProgressId generates
a new progress id
FileUpProgress progress = new FileUpProgress();
progressid = progress.NextProgressId();
}
}
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgs)
'--- When the page is first loaded, generate a new progress id
If Not (Page.IsPostBack) Then
'--- FileUpProgress.NextProgressId generates
a new progress id
Dim progress As New FileUpProgress()
progressid = progress.NextProgressId()
End If
End Sub
Step Two: Provide the HTML form as usual, but attach a script to start progress
on the "onsubmit" event of the form.
This HTML form is identical to the form used in the Simple Upload in ASP.NET example,
except that we will attach a function to the "onsubmit" event of the form. This
function will open a new window for the progress indicator, passing it the Progress
ID in the querystring. Likewise, the action attribute of the HTML form will be updated
to include the Progress ID in its querystring.
The HTML Form (in ProgressUpload.uplx)
<html>
<head>
<title>SoftArtisans FileUp ASP.NET Progress Indicator Sample</title>
<script language="javascript">
/*
This small function makes sure that the progress indicator and server-side
processing page receive the new progress ID we just created in the CodeBehind class.
Also, it pops up the progress window.
*/
function startUpload()
{
winStyle = "height=200,width=550,status=no,scrollbars=no,toolbar=no,"
"menubar=no,location=no";
if(theForm.myFile.value != "")
window.open("ProgressIndicator.aspx?progressid=<%=progressid%>",
"_blank", winStyle);
theForm.action = theForm.action + "?progressid=" + <%=progressid%>;
}
</script>
</head>
<body>
<form onSubmit="startUpload();" id="theForm" runat="server"
enctype="multipart/form-data" method="post">
Enter Filename: <input type="file" id="myFile" name="myFile"
/>
Click "Browse" to select a file to upload
<input runat="server" OnServerClick="UploadBtn_Click" id="UploadBtn"
type="submit" value="Upload File" />
<asp:literal id="ltrUploadResults" runat="server" />
</form>
</body>
</html>
Adding a Server-Side Progress Indicator
This sample builds on the concepts taught in the "Getting Started" chapter, in the
example, "A Simple Upload in ASP.NET". It assumes that you already understand how
to configure your application and that you know how to perform at least a simple
upload.
FileUp includes a server-side progress indicator that can be displayed to the user
using HTML. The server-side progress indicator lets you know how much of the entire
upload has arrived at the server. In an upload from the browser to an ASP.NET page,
include the progress indicator in a separate page. In this page, you can get and
display to the user:
The Percentageof the upload that has reached the server.
You can use HTML techniques to customize the output effect, and display a counter
or a progress bar.
Progress Indication in ASP.NET
Under ASP.NET, FileUp's progress indication is handled by the
HttpModule. Therefore, to display accurate progress indication in ASP.NET,
upload to a file with the .uplx extension.
Example
The complete code for the following example is available in the "Progress Indicator"
sample included in the "FileUp/Samples/UploadSamples" installation directory. This
sample contains the following pages:
Page Name
Function
ProgressUpload.uplx
Contains the display HTML for the form and will display the response. Also responsible
for opening the progress indicator window.
ProgressUpload.uplx.[vb|cs]
Code-behind of ProgressUpload.uplx: Contains the logic that will accept the request
on the server, save out the files and coordinate progress indication.
ProgressIndicator.aspx
Contains the display HTML for the progress indicator.
ProgressIndicator.aspx.[vb|cs]
Code-behind for ProgressIndicator.aspx: Instantiates the FileUp Progress Indicator
object and provides logic for progress indication display.
There are 5 steps to this process:
Obtain a ProgressID on the Server before rendering the HTML for the upload form.
Provide the HTML form as usual, but attach a script to start progress on the "onsubmit"
event of the form.
Provide a graphical representation of progress with HTML.
Provide the logic to drive the progress display in the code-behind[ProgressIndicator.aspx.[vb|cs]
of the Progress Indicator page.
Set up ProgressUpload.uplx.[vb|cs] to synchronize with the progress indicator before
parsing the request.
Step One: Obtain a ProgressID on the Server before rendering the HTML for the upload
form.
A Progress ID must be obtained from the FileUp Progress Indicator object as the
first step to an upload request that will provide progress indication. This Progress
ID will be used to synchronize the progress indication display code and the FileUp
upload processing code, even though they exist in separate pages, on separate threads.
This progress ID must be obtained from the Progress Indicator object's NextProgressId()
function. It should not be "set" as a value in any other way (do not provide your
own values). The progress indicator provides an identifier to distinguish a particular
upload's progress indication from any other progress indication occuring in other
upload requests being handled by FileUp on the same webserver.
In the code behind of ProgressUpload.uplx, instantiate the FileUp Progress object
on the Page_Load event.
C#
protected void Page_Load(object sender, EventArgs e)
{
//--- When the page is first loaded, generate a new progress id
if (!Page.IsPostBack)
{
//--- FileUpProgress.NextProgressId generates
a new progress id
FileUpProgress progress = new FileUpProgress();
progressid = progress.NextProgressId();
}
}
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgs)
'--- When the page is first loaded, generate a new progress id
If Not (Page.IsPostBack) Then
'--- FileUpProgress.NextProgressId generates
a new progress id
Dim progress As New FileUpProgress()
progressid = progress.NextProgressId()
End If
End Sub
Step Two: Provide the HTML form as usual, but attach a script to start progress
on the "onsubmit" event of the form.
This HTML form is identical to the form used in the Simple Upload in ASP.NET example,
except that we will attach a function to the "onsubmit" event of the form. This
function will open a new window for the progress indicator, passing it the Progress
ID in the querystring. Likewise, the action attribute of the HTML form will be updated
to include the Progress ID in its querystring.
The HTML Form (in ProgressUpload.uplx)
<html>
<head>
<title>SoftArtisans FileUp ASP.NET Progress Indicator Sample</title>
<script language="javascript">
/*
This small function makes sure that the progress indicator and server-side
processing page receive the new progress ID we just created in the CodeBehind class.
Also, it pops up the progress window.
*/ function startUpload()
{
winStyle = "height=200,width=550,status=no,scrollbars=no,toolbar=no,"
&
"menubar=no,location=no";
if(theForm.myFile.value != "")
window.open("ProgressIndicator.aspx?progressid=<%=progressid%>",
"_blank", winStyle);
theForm.action = theForm.action + "?progressid=" + <%=progressid%>;
} </script>
</head>
<body>
<form onSubmit="startUpload();" id="theForm" runat="server"
enctype="multipart/form-data" method="post">
Enter Filename: <input type="file" id="myFile" name="myFile"
/>
Click "Browse" to select a file to upload
<input runat="server" OnServerClick="UploadBtn_Click" id="UploadBtn"
type="submit" value="Upload File" />
<asp:literal id="ltrUploadResults" runat="server" />
</form>
</body>
</html>
Step Three: Provide a graphical representation of progress with HTML
The FileUp Progress Indicator does not provide it's own GUI. Instead, it provides
information on progress indication so that you can develop your own custom represenatation
of progress. In this sample, we are using an HTML table and an <hr> element
to function as a progress meter.
ProgressIndicator.aspx
<html>
<body>
<h3>Upload Progress:</h3>
<!--
This table holds cells that are used to display
the upload progress for the progress indicator
-->
<asp:Table id="UploadTable"
GridLines="Both"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="8pt"
CellPadding="15"
CellSpacing="0"
runat="server"<
Step Four: Provide the logic to drive the progress display in the code-behind ProgressIndicator.aspx.[vb|cs]
of the Progress Indicator page.
Here you will instantiate the FileUp Progress Indicator object and retrieve the
ProgressID from the querystring. Once the ID has been assigned to the Progress Indicator
object, the Percentage property is checked. The page will continue to refresh, updating
the display graphics until it reaches 100%.
C#
public class ProgressIndicator : System.Web.UI.Page
{
//--- Declare a string and controls used on the webform
//--- to display the upload progress
protected string strPercent = String.Empty;
protected System.Web.UI.WebControls.TableCell cellProgressID;
protected System.Web.UI.WebControls.TableCell cellTransferredBytes;
protected System.Web.UI.WebControls.TableCell cellTotalBytes;
protected System.Web.UI.WebControls.TableCell cellPercentage;
protected void Page_Load()
{
//--- Each time the page is loaded, update the
upload progress
UpdateProgress();
}
private void UpdateProgress()
{
//--- Delare an object for the FileUp progress
object
FileUpProgress progress = null;
try
{
//--- Instantiate the FileUpProgress
object
progress = new FileUpProgress();
//--- Get the Progress ID
from the query string
int intProgressId = Convert.ToInt32(Request.QueryString["progressid"]);
//--- Important: Assign the
progress ID to the object to monitor
//--- the upload
progress.ProgressId = intProgressId;
//--- If the upload isn't
complete, continue to refresh the page
//--- to display the progress
if(progress.Percentage <
100)
Page.Response.Write("<meta
http-equiv=\"Refresh\" content="1" />");
//--- Update the progress
table below with the current information
cellProgressID.Text = progress.ProgressId.ToString();
strPercent = progress.Percentage.ToString("N")
+ "%";
cellTransferredBytes.Text
= progress.TransferredBytes.ToString();
cellTotalBytes.Text = progress.TotalBytes.ToString();
cellPercentage.Text = progress.Percentage.ToString("N");
}
catch (Exception ex)
{
cellProgressID.Text = "<b>An
exception has occurred</b><br>" +
ex.Message;
}
finally
{
//--- Always call Dispose
in the finally block
if (progress != null)
{
progress.Dispose();
progress = null;
}
}
}
VB.NET
Public Class ProgressIndicator : Inherits System.Web.UI.Page
'--- Declare a string and controls used on the webform
'--- to display the upload progress
Protected strPercent As String = String.Empty
Protected cellProgressID As System.Web.UI.WebControls.TableCell
Protected cellTransferredBytes As System.Web.UI.WebControls.TableCell
Protected cellTotalBytes As System.Web.UI.WebControls.TableCell
Protected cellPercentage As System.Web.UI.WebControls.TableCell
Protected Sub Page_Load(sender As Object, e As EventArgs)
'--- Each time the page is loaded, update the
upload progress
UpdateProgress()
End Sub
Private Sub UpdateProgress()
Dim progress As FileUpProgress
Try
'--- Instantiate the FileUpProgress
object
progress = New FileUpProgress()
'--- Get the Progress ID from
the query string
Dim intProgressId As Integer
intProgressId = Convert.ToInt32(Request.QueryString("progressid"))
'--- Important: Assign the
progress ID to the object to monitor
'--- the upload
progress.ProgressId = intProgressId
'--- If the upload isn't complete,
continue to refresh the page
'--- to display the progress
If progress.Percentage <
100 Then
Page.Response.Write("<meta
http-equiv=""Refresh"" content="1" />")
End If
'--- Update the progress table
below with the current information
cellProgressID.Text = progress.ProgressId.ToString()
strPercent = progress.Percentage.ToString("N")
+ "%"
cellTransferredBytes.Text
= progress.TransferredBytes.ToString()
cellTotalBytes.Text = progress.TotalBytes.ToString()
cellPercentage.Text = progress.Percentage.ToString("N")
Catch ex As System.Exception
cellProgressID.Text = "<b>An
exception has occurred</b><br>" + _
ex.Message
Finally
If Not (progress Is Nothing)
Then
progress.Dispose()
progress
= Nothing
End If
End Try
End Sub
Step Three: Provide a graphical representation of progress with HTML
The FileUp Progress Indicator does not provide it's own GUI. Instead, it provides
information on progress indication so that you can develop your own custom represenatation
of progress. In this sample, we are using an HTML table and an <hr> element
to function as a progress meter.
ProgressIndicator.aspx
<html>
<body>
<h3>Upload Progress:</h3>
<!--
This table holds cells that are used to display
the upload progress for the progress indicator
-->
<asp:Table id="UploadTable"
GridLines="Both"
HorizontalAlign="Center"
Font-Name="Verdana"
Font-Size="8pt"
CellPadding="15"
CellSpacing="0"
runat="server"<
Step Four: Provide the logic to drive the progress display in the code-behind ProgressIndicator.aspx.[vb|cs]
of the Progress Indicator page.
Here you will instantiate the FileUp Progress Indicator object and retrieve the
ProgressID from the querystring. Once the ID has been assigned to the Progress Indicator
object, the Percentage property is checked. The page will continue to refresh, updating
the display graphics until it reaches 100%.
C#
public class ProgressIndicator : System.Web.UI.Page
{
//--- Declare a string and controls used on the webform
//--- to display the upload progress
protected string strPercent = String.Empty;
protected System.Web.UI.WebControls.TableCell cellProgressID;
protected System.Web.UI.WebControls.TableCell cellTransferredBytes;
protected System.Web.UI.WebControls.TableCell cellTotalBytes;
protected System.Web.UI.WebControls.TableCell cellPercentage;
protected void Page_Load()
{
//--- Each time the page is loaded, update the
upload progress
UpdateProgress();
}
private void UpdateProgress()
{
//--- Delare an object for the FileUp progress
object
FileUpProgress progress = null;
try
{
//--- Instantiate the FileUpProgress
object
progress = new FileUpProgress();
//--- Get the Progress ID
from the query string
int intProgressId = Convert.ToInt32(Request.QueryString["progressid"]);
//--- Important: Assign the
progress ID to the object to monitor
//--- the upload
progress.ProgressId = intProgressId;
//--- If the upload isn't
complete, continue to refresh the page
//--- to display the progress
if(progress.Percentage <
100)
Page.Response.Write("<meta
http-equiv=\"Refresh\" content="1" />");
//--- Update the progress
table below with the current information
cellProgressID.Text = progress.ProgressId.ToString();
strPercent = progress.Percentage.ToString("N")
+ "%";
cellTransferredBytes.Text
= progress.TransferredBytes.ToString();
cellTotalBytes.Text = progress.TotalBytes.ToString();
cellPercentage.Text = progress.Percentage.ToString("N");
}
catch (Exception ex)
{
cellProgressID.Text = "<b>An
exception has occurred</b><br>" +
ex.Message;
}
finally
{
//--- Always call Dispose
in the finally block
if (progress != null)
{
progress.Dispose();
progress = null;
}
}
}
VB.NET
Public Class ProgressIndicator : Inherits System.Web.UI.Page
'--- Declare a string and controls used on the webform
'--- to display the upload progress
Protected strPercent As String = String.Empty
Protected cellProgressID As System.Web.UI.WebControls.TableCell
Protected cellTransferredBytes As System.Web.UI.WebControls.TableCell
Protected cellTotalBytes As System.Web.UI.WebControls.TableCell
Protected cellPercentage As System.Web.UI.WebControls.TableCell
Protected Sub Page_Load(sender As Object, e As EventArgs)
'--- Each time the page is loaded, update the
upload progress
UpdateProgress()
End Sub
Private Sub UpdateProgress()
Dim progress As FileUpProgress
Try
'--- Instantiate the FileUpProgress
object
progress = New FileUpProgress()
'--- Get the Progress ID from
the query string
Dim intProgressId As Integer
intProgressId = Convert.ToInt32(Request.QueryString("progressid"))
'--- Important: Assign the
progress ID to the object to monitor
'--- the upload
progress.ProgressId = intProgressId
'--- If the upload isn't complete,
continue to refresh the page
'--- to display the progress
If progress.Percentage <
100 Then
Page.Response.Write("<meta
http-equiv=""Refresh"" content="1" />")
End If
'--- Update the progress table
below with the current information
cellProgressID.Text = progress.ProgressId.ToString()
strPercent = progress.Percentage.ToString("N")
+ "%"
cellTransferredBytes.Text
= progress.TransferredBytes.ToString()
cellTotalBytes.Text = progress.TotalBytes.ToString()
cellPercentage.Text = progress.Percentage.ToString("N")
Catch ex As System.Exception
cellProgressID.Text = "<b>An
exception has occurred</b><br>" + _
ex.Message
Finally
If Not (progress Is Nothing)
Then
progress.Dispose()
progress
= Nothing
End If
End Try
End Sub
End Class
Step Five: Set up ProgressUpload.uplx.[vb|cs] to synchronize with the progress indicator
before parsing the request.
The upload request processing code must first be preceeded by code that synchronizes
progress indication by instantiating the Progress Indicator object and passing it
the ProgressID for this upload. After this synchronization, the rest of the upload
processing code is written as usual.
C#
protected void UploadBtn_Click(object sender, EventArgs e)
{
//--- Hide the form after the upload button is clicked
theForm.Visible = false;
ProcessUpload();
}
//--- Process the upload request
private void ProcessUpload()
{
//--- Declare an object for FileUp
FileUp fileUpload = null;
//--- Decalre an object for the file
SaFile file = null;
try
{
//--- Instantiate the FileUp object
fileUpload = new FileUp(Context);
//--- Get the progress id from the querystring
int intProgressID = Convert.ToInt32(Request.QueryString["progressid"]);
fileUpload.ProgressID = intProgressID;
//--- This StringBuilder will be used to display
the results of the upload
System.Text.StringBuilder results = new System.Text.StringBuilder();
fileUpload.Path = "C:\\Temp"
//--- Check to be sure there was a file selected
in the form
//--- If so, continue processing
//--- Get a reference to the uploaded file field
file = (SaFile)fileUpload.Form["myFile"];
if (file != null)
{
if (!file.IsEmpty)
{
file.Save();
//--- Display
information about the saved file
results.Append("<h3>FileUp
Saved the File Successfully</h3>");
//--- More
results code can be placed here (see full sample)
}
else
{
//--- If
SaFile.IsEmpty is true, the file field was left empty
results.Append("There
was no file submitted in the form field.");
}
}
else
{
results.Append("The referenced
field does not exist or is not " &
"of type=\"file\"");
}
//--- Display the results on the webform
ltrUploadResults.Text = results.ToString();
}
catch (Exception ex)
{
//--- If an exception is caught, display the
results
ltrUploadResults.Text = "<b>An error has
occurred:</b><br />" +
ex.Message;
}
finally
{
//--- Always call Dispose in the finally block
if (fileUpload != null)
{
fileUpload.Dispose();
fileUpload = null;
}
}
VB.NET
Protected Sub UploadBtn_Click(sender As Object, e As EventArgs)
'--- Hide the form after the upload button is clicked
theForm.Visible = False
ProcessUpload()
End Sub
'--- Process the upload request
Private Sub ProcessUpload()
'--- Declare an object for FileUp
Dim fileUpload As FileUp
'--- Declare an object for the file
Dim file As SaFile
Try
'--- Instantiate the FileUp object
fileUpload = New FileUp(Context)
'--- Get the progress id from the querystring
Dim intProgressID As Integer = _
Convert.ToInt32(Request.QueryString("progressid"))
fileUpload.ProgressID = intProgressID
'--- This StringBuilder will be used to display
the results of the upload
Dim results As New System.Text.StringBuilder()
fileUpload.Path = "C:\temp"
'--- Check to be sure there was a file selected
in the form
'--- If so, continue processing
'--- Get a reference to the uploaded file field
file = CType(fileUpload.Form("myFile"), SaFile)
If Not (file Is Nothing) Then
If Not (file.IsEmpty) Then
file.Save()
'--- Display
information about the saved file
results.Append("<h3>FileUp
Saved the File Successfully</h3>")
'---- More
results code can be placed here (see full sample code)
Else
'--- If
SaFile.IsEmpty is true, the file field was left empty
results.Append("There
was no file submitted in the form field.")
End If
Else
results.Append("The referenced
field does not exist or is not " + _
"of type=""file""")
End If
'--- Display the results on the webform
ltrUploadResults.Text = results.ToString()
Catch ex As System.Exception
'--- If an exception is caught, display the
results
ltrUploadResults.Text = "<b>An error has
occurred:</b><br />" + _
ex.Message
Finally
'--- Always call FileUp.Dispose in the finally
block
If Not (fileUpload Is Nothing) Then
fileUpload.Dispose()
fileUpload = Nothing
End If
End Try