Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

File Upload Animation

Posted on 2011-03-17
26
580 Views
Last Modified: 2012-06-21
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
Comment
Question by:triplebd69
  • 15
  • 10
26 Comments
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35158473
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
 

Author Comment

by:triplebd69
ID: 35159031
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159174
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 

Author Comment

by:triplebd69
ID: 35159211
Not sure what I need here, would this be something like the register assembly for ajax?
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159739
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159766
And add at the top of tour page:
<style type="text/css">
hidden { display: none; }
</style>

Julien
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159783
Oops, missed the . before hidden
<style type="text/css">
.hidden { display: none; }
</style>

Julien
0
 

Author Comment

by:triplebd69
ID: 35159788
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159940
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35159970
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
 

Author Comment

by:triplebd69
ID: 35160691
Neither one works,.

Page.ResolveURL brings back the path to the image (i.e) - website/images/await.gif
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35163139
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35163144
<img, not <image...
0
 
LVL 70

Expert Comment

by:Éric Moreau
ID: 35164281
if I remember correctly, http://neatupload.codeplex.com/ has a progress bar
0
 

Author Comment

by:triplebd69
ID: 35181615
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
 

Author Comment

by:triplebd69
ID: 35184173
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35187728
try "../images/ActiveWait.gif" as the image url.

I'll try your code asap.
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35187817
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
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35187829
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
 
LVL 3

Accepted Solution

by:
_kiwi_ earned 500 total points
ID: 35187931
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
 

Author Comment

by:triplebd69
ID: 35189379
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
 

Author Comment

by:triplebd69
ID: 35189855
Almost there, the gif shows, but no animation.
0
 

Author Comment

by:triplebd69
ID: 35190041
Also, no gif at all on production server, shows only in dev
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35190719
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
 

Author Comment

by:triplebd69
ID: 35190758
Working in production now, just not animating.
0
 
LVL 3

Expert Comment

by:_kiwi_
ID: 35191019
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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

838 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question