Solved

File Upload Animation

Posted on 2011-03-17
26
564 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
 

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 69

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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…

705 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now