File Upload Progress

Discussion in 'ASP .Net' started by Kenneth Keeley, Oct 21, 2003.

  1. 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.
    Kenneth Keeley, Oct 21, 2003
    #1
    1. Advertising

  2. Kenneth Keeley

    Rajesh.V Guest

    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 mailto:.


    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
    mailto:.


    "Kenneth Keeley" <> wrote in message
    news:...
    > 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.
    >
    >
    Rajesh.V, Oct 21, 2003
    #2
    1. Advertising

  3. 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" <> wrote in message
    news:...
    > 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 mailto:.
    >
    >
    > 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
    > mailto:.
    >
    >
    > "Kenneth Keeley" <> wrote in message
    > news:...
    > > 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.
    > >
    > >

    >
    >
    Kenneth Keeley, Oct 21, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Li Zhang
    Replies:
    1
    Views:
    2,786
    Li Zhang
    May 20, 2005
  2. Bob
    Replies:
    2
    Views:
    4,050
    Jacky Kwok
    Nov 25, 2005
  3. Charlie Zhang
    Replies:
    3
    Views:
    1,252
    Paul Lutus
    Aug 16, 2004
  4. sebizar

    File Upload progress bar

    sebizar, Jan 24, 2006, in forum: Java
    Replies:
    0
    Views:
    487
    sebizar
    Jan 24, 2006
  5. Jeff Thies

    file upload progress IE

    Jeff Thies, Aug 6, 2004, in forum: HTML
    Replies:
    9
    Views:
    2,621
    Jeff Thies
    Aug 7, 2004
Loading...

Share This Page