• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 676
  • Last Modified:

File Upload Animation

I have a web page VB.NET 2010.  One of the content pages I allow users to upload files up to 150mb.  

I would like to show some sort of gif animation to show that the process is working.  All help is appreciated.
0
triplebd69
Asked:
triplebd69
  • 15
  • 10
1 Solution
 
_kiwi_Commented:
If you only need a gif like animation, using a hidden div that you will show when the file upload form is uploaded should do the trick.

<div name="uploadProgress" class="hidden"><img src="progress.gif" alt="upload in progress"/></div>

and a bit of jquery should do the trick.
<script type="text/javascript">
 $("form").submit(function() {$("div[name=uploadProgress]").show(); return true;});
</script>

If you want better controls, you have a lot of Ajax based (requires a bit of server side work) widgets that monitor upload (e.g. http://mattberseth.com/blog/2008/07/aspnet_file_upload_with_realti_1.html but there are more).

Hope this helps,
Julien
0
 
triplebd69Author Commented:
Thanks, Itrie the above but not very good with javascript.

I get this error - Microsoft JScript runtime error: Object expected

on this line - $("form").submit(function () { $("div[name=uploadProgress]").show(); return true; });

Here is the code -
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <script type="text/javascript">
      $("form").submit(function () { $("div[name=uploadProgress]").show(); return true; });
</script>
<asp:Panel>
...
</asp:Panel> 
        <div name="uploadProgress" class="hidden"><img src="~/images/ActiveWait.gif" alt="upload in progress"/></div>
</asp:Content>

Open in new window

0
 
_kiwi_Commented:
You have to add the jquery framework before you put the script block. Check the jquery web site for the URL that fits your needs. (sorry for the evasive answer, i'm on a mobile phone)
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
triplebd69Author Commented:
Not sure what I need here, would this be something like the register assembly for ajax?
0
 
_kiwi_Commented:
Nope, just add:
 <script language="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Before the other script block, and you should be good to go.

Julien
0
 
_kiwi_Commented:
And add at the top of tour page:
<style type="text/css">
hidden { display: none; }
</style>

Julien
0
 
_kiwi_Commented:
Oops, missed the . before hidden
<style type="text/css">
.hidden { display: none; }
</style>

Julien
0
 
triplebd69Author Commented:
I have changed things a little now I get an outline with the text but a red box instead of the gif.

Here is my current code.
This points the updatepanel

        <asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpload" DisplayAfter="1">
            <ProgressTemplate>
                <div style="position: absolute; left: 420px; top: 300px; z-index: 1000; border: 1px solid black; background-color:White; background-image: url(../images/whitepixel.gif); opacity: 0.4;">
                    <center>
                        Processing...<br />
                        <img src="~/images/ActiveWait.gif" alt="Uploading... Please Wait..." />
                    </center>
            </ProgressTemplate>
        </asp:UpdateProgress>

Open in new window

0
 
_kiwi_Commented:
For the gif, either use an asp:Image control, or replace the image URL with <%= Server.MapPath("~/images/ActiveWait.gif") %>

UpdatePanel works without you having to write the JS code, nice one :)

Cheers,
Julien
0
 
_kiwi_Commented:
MapPath is not the good one

Page.ResolveUrl is what you want (mappath gives you the physical path when we want the full URL).
0
 
triplebd69Author Commented:
Neither one works,.

Page.ResolveURL brings back the path to the image (i.e) - website/images/await.gif
0
 
_kiwi_Commented:
With a leading / you should be good.
<image src="/<%= Page.ResolveUrl("~/images/await.gif")"/>
I'll make a quick test this morning.

Have a nice day,
Julien
0
 
_kiwi_Commented:
<img, not <image...
0
 
Éric MoreauSenior .Net ConsultantCommented:
if I remember correctly, http://neatupload.codeplex.com/ has a progress bar
0
 
triplebd69Author Commented:
Julien,

Thanks but it still doesn't work.

I get a box showing the alt wording and a red X where the gif should be.
<asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpload" DisplayAfter="1">
            <ProgressTemplate>
                <div style="position: absolute; left: 420px; top: 300px; z-index: 1000; border: 1px solid black; background-color:White; background-image: url(../images/whitepixel.gif); opacity: 0.4;">
                    <center>
                        Processing...<br />
                        <img src="/<%=page.resolveurl("~/images/AWait.gif")%>" alt="Uploading..." />
                       </center>
            </ProgressTemplate>
        </asp:UpdateProgress>

Open in new window

0
 
triplebd69Author Commented:
Here is the current code but still getting the red x and just the text.
<asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpload" DisplayAfter="1">
            <ProgressTemplate>
                <div style="position: absolute; left: 420px; top: 300px; z-index: 1000; border: 1px solid black; background-color:White; background-image: url(../images/whitepixel.gif); opacity: 0.4;">
                    <center>
                        Processing...<br />
                        <img src="/<%=page.resolveUrl("~/images/ActiveWait.gif")%>" alt="Uploading... Please Wait..." />
                    </center>
            </ProgressTemplate>
        </asp:UpdateProgress>

Open in new window

0
 
_kiwi_Commented:
try "../images/ActiveWait.gif" as the image url.

I'll try your code asap.
0
 
_kiwi_Commented:
I made a quick test on a page, here is the content.

The "red square" problem can be solved by using an asp:Image instead of the plain old <img tag.

We tried also without the "/" before Page.ResolveUrl, and it works too.

Check your image is in the "images" folder and it should be ok.


<asp:ScriptManager runat="server"/>
    <asp:UpdatePanel ID="pnlUpload" runat="server">
        <ContentTemplate>
            <asp:FileUpload ID="file" runat="server" />
            <asp:Button runat="server" Text="envoyer" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpload" DisplayAfter="1">
            <ProgressTemplate>
                <div style="position: absolute; left: 420px; top: 300px; z-index: 1000; border: 1px solid black; background-color:White; background-image: url(../images/whitepixel.gif); opacity: 0.4;">
                    <center>
                        Processing...<br />
                        <asp:Image runat="server" ImageUrl="~/images/ActiveWait.gif" AlternateText="Uploading... Please Wait..." />
                    </center>
            </ProgressTemplate>
        </asp:UpdateProgress>

Open in new window


Cheers,
Julien
0
 
_kiwi_Commented:
This (once again) example needs an extension: Upload does not (out of the box) with in an updatepanel, you have to add it as a postback trigger.

I make the updated version and send it in the next few minutes.
0
 
_kiwi_Commented:
To have it working, I did this version.

Notice:
- on the jquery script block, type instead of language (removes the error)
- in the updatepanel, added the <Triggers> block avd the PostBackTrigger to have file upload working (otherwise the result is "No File")
- got the div back instead of the updateprogress that does not fire since we have a REAL postback
- Language = C# for the event handler, but works the same with VB.Net

Cheers,
Julien

    <style type="text/css">
        .hidden { display: none; }
    </style>
    <asp:ScriptManager runat="server"/>
    <asp:UpdatePanel ID="pnlUpload" runat="server">
        <ContentTemplate>
            <asp:FileUpload ID="file" runat="server" />
            <asp:Button runat="server" ID="btnUpload" Text="envoyer" onclick="btnUpload_Click" />
            <asp:Label runat="server" ID="result" />
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btnUpload" />
        </Triggers>
    </asp:UpdatePanel>
        <div id="updProgress" class="hidden" style="position: absolute; left: 420px; top: 300px; z-index: 1000; border: 1px solid black; background-color:White; background-image: url(../images/whitepixel.gif); opacity: 0.4;">
            <center>
                Processing...<br />
                <%--<asp:Image runat="server" ImageUrl="~/images/ActiveWait.gif" AlternateText="Uploading... Please Wait..." />--%>
                <img src="<%=Page.ResolveUrl("~/images/ActiveWait.gif")%>" alt="Uploading... Please Wait..." />
            </center>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $("form").submit(function () {
                $("#updProgress").show();
                return true;
            });
        </script>

        <script runat="server">
            protected void btnUpload_Click(object sender, EventArgs e)
            {
                if (file.PostedFile != null && !string.IsNullOrEmpty(file.PostedFile.FileName))
                {
                    result.Text = string.Format("File: {0}", file.PostedFile.FileName);
                }
                else
                {
                    result.Text = "No File";
                }
            }
        </script>

Open in new window

0
 
triplebd69Author Commented:
Getting an error on the script, but don't see the syntax problem.
<script runat="server">
            protected void btnUpload_Click(object sender, EventArgs e)
            {
                if (file.PostedFile != null && !string.IsNullOrEmpty(file.PostedFile.FileName))
                {
                    result.Text = string.Format("File: {0}", file.PostedFile.FileName);
                }
                else
                {
                    result.Text = "No File";
                }
            }
        </script>

Open in new window

0
 
triplebd69Author Commented:
Almost there, the gif shows, but no animation.
0
 
triplebd69Author Commented:
Also, no gif at all on production server, shows only in dev
0
 
_kiwi_Commented:
Which browser do you use for viewing your page ?

For the image being in production and not in dev, this has to be an environment error, check all files have been sent to the destination server and all images work fine.

Cheers,
Julien
0
 
triplebd69Author Commented:
Working in production now, just not animating.
0
 
_kiwi_Commented:
IE < 9 does not display the moving image.
==> On submit, IE stops all animations on a page and all scripts...
IE9, FireFox, Chrome and Safari display it without any problem...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 15
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now