Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > File Upload Progress

Reply
Thread Tools

File Upload Progress

 
 
Kenneth Keeley
Guest
Posts: n/a
 
      10-21-2003
Hi,
I have a page that uploads files to my server and I wish to display a
"Please wait while uploading" page to the user while the file is uploading.
I have been able to redirect the user once the file is finished uploading
but am not sure how to do it while file is uploading.
Some sample code would be welcomed with open arms.

Thank You.


 
Reply With Quote
 
 
 
 
Rajesh.V
Guest
Posts: n/a
 
      10-21-2003
This is about the best solution given by brad mcCabe in his article
aspnetpro.com

UI Tip

LANGUAGES: VB .NET

ASP.NET VERSIONS: 1.0 | 1.1


Make a Progress Indicator For Slow-Loading Pages

Create a pop-up status page that lets your users know they're not
forgotten.


By Brad McCabe


One problem with ASP.NET is that keeping the user informed about the
status of a long running task is difficult. When a page that takes time to
load is posted to the server, the user often is left wondering whether the
application is responding or if their request even made it to the server.
I'll give you a simple tip that provides the user a basic status screen to
provide them better feedback.

First, create a basic page that asks a user for their name and
provides them a button to submit the page. The code behind the button is
pretty simple:

Response.Redirect("EndPage.aspx?name=" & Name.Text)

Next, create a simple page that sleeps the thread for 10 seconds to
simulate a long running process. After the thread wakes up, the page updates
a label to welcome the user. The code looks like this:


System.Threading.Thread.Sleep(10000)

Label1.Text = "Welcome " & Request.QueryString("Name") & "!"


If you run these two pages, you'll find that when you click on the
submit button, the browser sits on the start page for 10 seconds without any
feedback to the user. Now modify the start-page code to redirect to an
intermediary loading page. This page provides your end user with visual
notification that the application is processing their request. Here's the
new code behind on the submit button:

Dim URL As String = "EndPage.aspx?name=" & Name.Text

Response.Redirect("Loading.Aspx?Page=" & URL)


The previous code now captures the original URL and passes it on the
query string to the loading page, Loading.Aspx. The loading page then
displays to the user a status message while loading the requested page.


First, start by creating a basic message for your user:


<table border="0" cellpadding="0" cellspacing="0"

width="99%" height="99%" align="center"

valign="middle">

<tr>

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

<font color="Red" size="5">


<span id="Message">Loading&nbsp;--

Please Wait</span>

<span id="Progress" style="WIDTH:25px;

TEXT-ALIGN:left"></span>

</font>

</td>

</tr>

</table>


Inside the table at the middle of the screen, you want to display a
message to the user. You'll use JavaScript's Progress span tag here to
update the screen and inform the user that the application is responding.


Now that the screen is set up, you need to hook up the JavaScript to
make the page work using the client-side onLoad and onUnload events:


<body onload="BeginPageLoad()" onunload="EndPageLoad()">


When the page is loaded, your custom BeginPageLoad function is fired.
BeginPageLoad has two lines of JavaScript:


location.href = "<%= Request.QueryString("Page")%>";

iIntervalId = window.setInterval("iLoopCounter=

UpdateProgress(iLoopCounter, iMaxLoop)", 500);


The first line of code starts the loading processes for the requested
page. After the page has been requested from the server, a call to the
UpdateProgress function starts a timer that updates the screen. This
function uses the Progress span tag and displays five dots in succession.
When the fifth dot is added, the span is cleared and the process starts
over. Once the new page is finished loading, it is rendered immediately for
the user and the EndPageLoad function will be processed. The EndPageLoad
function then performs some basic clean-up and notifies the user if the
transfer fails or an error occurs:


window.clearInterval(iIntervalId);

Progress.innerText = "Page Loaded -- Not Transferring";


As you can see, you need only a few lines of JavaScript to provide the
user with visual notification that their request has been submitted and is
being processed. By providing the user with this feedback, you can help
eliminate the possibility that the user will cancel the page request and
attempt to resubmit the page or hit the submit button repeatedly, possibly
corrupting your data or bringing down the application.


Got a UI question, tip, or idea for a topic you'd like me to cover?
I'd love to hear it. E-mail me at (E-Mail Removed).


This article's sample code is available for download.


Brad McCabe is the technical evangelist for Infragistics. Brad also
has been a systems architect and consultant for Verizon Communications and
many other clients, and he was a leading .NET evangelist within Ajilon
Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET
Compact Framework, and Microsoft's networking technologies. E-mail him at
(E-Mail Removed).


"Kenneth Keeley" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hi,
> I have a page that uploads files to my server and I wish to display a
> "Please wait while uploading" page to the user while the file is

uploading.
> I have been able to redirect the user once the file is finished uploading
> but am not sure how to do it while file is uploading.
> Some sample code would be welcomed with open arms.
>
> Thank You.
>
>



 
Reply With Quote
 
 
 
 
Kenneth Keeley
Guest
Posts: n/a
 
      10-21-2003
This doesn't seem to help when uploading Large Files as the
Response.Redirect does not happen until after the file is uploaded.

"Rajesh.V" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> This is about the best solution given by brad mcCabe in his article
> aspnetpro.com
>
> UI Tip
>
> LANGUAGES: VB .NET
>
> ASP.NET VERSIONS: 1.0 | 1.1
>
>
> Make a Progress Indicator For Slow-Loading Pages
>
> Create a pop-up status page that lets your users know they're not
> forgotten.
>
>
> By Brad McCabe
>
>
> One problem with ASP.NET is that keeping the user informed about the
> status of a long running task is difficult. When a page that takes time to
> load is posted to the server, the user often is left wondering whether the
> application is responding or if their request even made it to the server.
> I'll give you a simple tip that provides the user a basic status screen to
> provide them better feedback.
>
> First, create a basic page that asks a user for their name and
> provides them a button to submit the page. The code behind the button is
> pretty simple:
>
> Response.Redirect("EndPage.aspx?name=" & Name.Text)
>
> Next, create a simple page that sleeps the thread for 10 seconds to
> simulate a long running process. After the thread wakes up, the page

updates
> a label to welcome the user. The code looks like this:
>
>
> System.Threading.Thread.Sleep(10000)
>
> Label1.Text = "Welcome " & Request.QueryString("Name") & "!"
>
>
> If you run these two pages, you'll find that when you click on the
> submit button, the browser sits on the start page for 10 seconds without

any
> feedback to the user. Now modify the start-page code to redirect to an
> intermediary loading page. This page provides your end user with visual
> notification that the application is processing their request. Here's the
> new code behind on the submit button:
>
> Dim URL As String = "EndPage.aspx?name=" & Name.Text
>
> Response.Redirect("Loading.Aspx?Page=" & URL)
>
>
> The previous code now captures the original URL and passes it on the
> query string to the loading page, Loading.Aspx. The loading page then
> displays to the user a status message while loading the requested page.
>
>
> First, start by creating a basic message for your user:
>
>
> <table border="0" cellpadding="0" cellspacing="0"
>
> width="99%" height="99%" align="center"
>
> valign="middle">
>
> <tr>
>
> <td align="center" valign="middle">
>
> <font color="Red" size="5">
>
>
> <span id="Message">Loading&nbsp;--
>
> Please Wait</span>
>
> <span id="Progress" style="WIDTH:25px;
>
> TEXT-ALIGN:left"></span>
>
> </font>
>
> </td>
>
> </tr>
>
> </table>
>
>
> Inside the table at the middle of the screen, you want to display a
> message to the user. You'll use JavaScript's Progress span tag here to
> update the screen and inform the user that the application is responding.
>
>
> Now that the screen is set up, you need to hook up the JavaScript to
> make the page work using the client-side onLoad and onUnload events:
>
>
> <body onload="BeginPageLoad()" onunload="EndPageLoad()">
>
>
> When the page is loaded, your custom BeginPageLoad function is

fired.
> BeginPageLoad has two lines of JavaScript:
>
>
> location.href = "<%= Request.QueryString("Page")%>";
>
> iIntervalId = window.setInterval("iLoopCounter=
>
> UpdateProgress(iLoopCounter, iMaxLoop)", 500);
>
>
> The first line of code starts the loading processes for the

requested
> page. After the page has been requested from the server, a call to the
> UpdateProgress function starts a timer that updates the screen. This
> function uses the Progress span tag and displays five dots in succession.
> When the fifth dot is added, the span is cleared and the process starts
> over. Once the new page is finished loading, it is rendered immediately

for
> the user and the EndPageLoad function will be processed. The EndPageLoad
> function then performs some basic clean-up and notifies the user if the
> transfer fails or an error occurs:
>
>
> window.clearInterval(iIntervalId);
>
> Progress.innerText = "Page Loaded -- Not Transferring";
>
>
> As you can see, you need only a few lines of JavaScript to provide

the
> user with visual notification that their request has been submitted and is
> being processed. By providing the user with this feedback, you can help
> eliminate the possibility that the user will cancel the page request and
> attempt to resubmit the page or hit the submit button repeatedly, possibly
> corrupting your data or bringing down the application.
>
>
> Got a UI question, tip, or idea for a topic you'd like me to cover?
> I'd love to hear it. E-mail me at (E-Mail Removed).
>
>
> This article's sample code is available for download.
>
>
> Brad McCabe is the technical evangelist for Infragistics. Brad also
> has been a systems architect and consultant for Verizon Communications and
> many other clients, and he was a leading .NET evangelist within Ajilon
> Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET
> Compact Framework, and Microsoft's networking technologies. E-mail him at
> (E-Mail Removed).
>
>
> "Kenneth Keeley" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > Hi,
> > I have a page that uploads files to my server and I wish to display a
> > "Please wait while uploading" page to the user while the file is

> uploading.
> > I have been able to redirect the user once the file is finished

uploading
> > but am not sure how to do it while file is uploading.
> > Some sample code would be welcomed with open arms.
> >
> > Thank You.
> >
> >

>
>



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
File Upload progress bar sebizar Java 0 01-24-2006 02:56 PM
ASP.NET 2.0 file upload with progress dialog Bob ASP .Net 2 11-25-2005 01:51 AM
Question about HttpModule for file upload progress bar Li Zhang ASP .Net 1 05-19-2005 11:20 PM
Progress bar to show the progress of a task Charlie Zhang Java 3 08-16-2004 05:53 PM
file upload progress IE Jeff Thies HTML 9 08-07-2004 07:15 PM



Advertisments