File upload progress indicator

**russellr** · 08-Oct-2007 03:27 AM

Hi,

Several people have asked for an upload progress bar that users can see when they are uploading a file using your forms.

Unfortunately, this is a function of the browser so it's not possible, as far as I know, to display a true upload progress.

However, you can give a reasonable simulation or simple feedback to your users with the JavaScript below.

Step 1: put this in the HEAD section of your form:

HTML Code:

<script language="javascript" type="text/javascript">
<!--
var     wProgress = null;

function ShowProgress()
{
    wProgress = window.open("http://YOURWEBSITEHERE/prog.htm",
                "PleaseWait",
                        "top=0,left=0,width=200,height=200,location=no,toolbar=no,statusbar=no");
    return true;
}

function CloseProgress()
{
    if (wProgress)
    {
        wProgress.close();
        wProgress = null;
    }
    return true;
}
// -->
</script>

Make sure you replace YOURWEBSITEHERE with the domain name for your website.

Step 2: Upload a document to display, as "prog.htm". The following is a simple "Please wait..." message, but you can create any HTML document and make it as fancy as you like. You can have a progress bar animation if you like, but it won't, of course, be an actual representation of the actual upload progress.

HTML Code:

<html>
<head>
<title>Please Wait</title>
</head>
<body>
<p>Please wait while uploading....</p>
</body>
</html>

Step 3: change your Submit button to call the JavaScript, by adding the "onlick" attribute.

HTML Code:

<input type="submit" value="Submit" onClick="ShowProgress();" />

Step 4: change your "body" tag to close the progress window, by adding the "onunload" attribute:

HTML Code:

<body onUnload="CloseProgress();">

**johnhunter** · 24-Nov-2007 10:00 PM

An alternative approach is to display a progress message within the form page.

The following solution will show a message in the page when the submit button is clicked and 'grey out' the rest of the page content. This prevents users from clicking on submit or browsing away while the content uploads. As it all happens in the page there is no need to remove the message when the response page loads.

I've based this version on a standard Javascript library called JQuery, and a plugin to JQuery called SimpleModal by Eric Martin. Using a library means the core functionality is well maintained with regular upgrades for new browsers. You can see the kind of effect involved at the SimpleModal demo page.

Still interested?
OK, lets go through the steps to add the progress indicator to your form:

Step 1
Download the files for the 'Basic Modal Dialog' from SimpleModal demo page. Un-zip the files and upload the 2 javascript files:

jquery.pack.js
jquery.simplemodal.pack.js

to a javascript folder your server - I've named mine 'js'.

Step 2
Add the following script tags to the head of your form page. These should point to the javasript files you just uploaded.

HTML Code:

<script src='js/jquery.pack.js' type='text/javascript'></script>
<script src='js/jquery.simplemodal.pack.js' type='text/javascript'></script>

Step 3
Add the following stylesheets and javascript to the head of your form page (after the script tags). You can put the styles in external files if you prefer, or they can be added to your site stylesheet.

HTML Code:

<script type='text/javascript'>

$(document).ready(function () {
    $('form input[type="submit"]').click(function (e) {
        $('#progress-message', { close: false }).modal();
        
        /*e.preventDefault();*/ // uncomment for testing - stops the submission!
    });    
});
    
</script>
<style type="text/css" media="screen">

#modalOverlay { height:100%; width:100%; position:fixed; left:0; top:0; z-index:3000; background-color:#000; cursor:wait; }
#modalContainer { height:140px; width:160px; position:fixed; left:50%; top:25%; margin-left:-80px; z-index:1000; background-color:#fff; border:3px solid #666; }
#modalContainer #progress-message { padding:10px; text-align:center; color:#666; }

</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">

#modalContainer { position: absolute; top:expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(25 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); }
#modalIframe { z-index:1000; position:absolute; width:100%; height:100%; top:0; left:0; }

</style>
<![endif]-->

Step 4
Add the the progress message to the bottom of your form page. This will be hidden until the form is submitted.

HTML Code:

<div id="progress-message" style="display:none">
    <p>Please wait while uploading...</p>
    <img src="img/loading_ball.gif" width="32" height="32" alt="">
</div>

You can customise the message and use your own loading animation. This example uses an animated 'spinning beach ball' graphic provided with the lightbox script by Lokesh Dhakar (See the image at the lightbox site).

Note: There is no need to modify the actual form html. The script will look for a form submit button and tell it to display the indicator when it is clicked.

Finished
The progress indicator should display whenever the form is submitted and disappear when the response page loads. You can alter the content and style of the indicator to suit your site design - nicer text box, progress animation bar etc.

Hope you find it useful

.

John.

**johnhunter** · 25-Nov-2007 12:49 AM

All works fine - except with Explorer 7 when in quirks-mode which means its not suitable for a lot of sites.

The good news is I have added some nice fading and an online demo so you can see what it does.

I'll fix the solution to work with Explorer 7 and update the instructions in the previous post in the next few days.

**bikeman** · 04-Jan-2008 11:03 AM

Happy new year.

I have found a problem with this which I hope you can assist with.

My form uses onclick to validate submitted fields and pops a small advisory window if the form is not complete. When the advisory window's 'ok' button is clicked to acknowledge, the user is not taken back to the form and instead the loading graphic starts. It never ends because the form hasn't been submitted yet.

What can I do to make this compatible with my onclick form validation?

Thanks

**johnhunter** · 05-Jan-2008 04:56 PM

Hi bikeman,

With the Modal Dialog solution the function that shows the loading indicator is bound to the submit button onclick so it will get called at the same time as your validation.

The answer is to call your validation first and if everything is ok then display the loading indicator.

I've updated the example to include a validation function that you can update for your own form. The relevant javascript code is:

HTML Code:

<script type='text/javascript'>

function formValidation () {
    var isValid = false;
    var form = document.forms[0];
    
    // test the form values and set isValid
    if (form.realname.value != '') isValid = true;
    
    if(!isValid) {
        alert('The form required some values that you did not seem to provide.'
            +'\n\n Please re-enter your information')
    }
    return isValid;
}


$(document).ready(function () {
    $('form input[type="submit"]').click(function (e) {
        if (!formValidation()) {
            // not valid so stop the form submission
            e.preventDefault();
        }
        else {
            $('#progress-message', { close:false }).modal({ onOpen: function (dialog) {
                dialog.overlay.fadeIn('slow', function () {
                    dialog.container.slideDown('slow', function () {
                        dialog.content.fadeIn('slow');
                    });
                });
            }});
        }
        e.preventDefault();// for testing - remove this line!
    });
});
</script>

The formValidation function will be called when you click the submit button. Note that you don't need to call this function in the html as it is bound to the click in the script:

<input type="submit" onclick="formValidation()" ...NOT REQUIRED

Bear in mind that this validation will require javascript so you should also have server-side validation setup in your ini file.

Hope you find it useful.

P.S. I haven't fixed the IE7 / quirks-mode issue but if your site validates to html4 or xhtml then it will be fine

**bikeman** · 11-Jan-2008 11:57 AM

Hi John

Thanks for the update but how does the line

if (form.realname.value != '') isValid = true;

need to change to test for several form elements?

I tried

// test the form values and set isValid
if (form.order_number.value != '') isValid = true;
if (form.name.value != '') isValid = true;
if (form.email.value != '') isValid = true;

but it validates as long as any single field is completed rather than testing all fields.

Thanks

**johnhunter** · 11-Jan-2008 11:33 PM

I'd put the validation in as an example and hadn't given it much thought

. To test for multiple fields you will want to start with isValid true and change it to false if any fields fail...

HTML Code:

    var isValid = true;
    var form = document.forms[0];
    
    // test the form values and set isValid
    if (form.realname.value == '') isValid = false;
    if (form.name.value == '')     isValid = false;
    if (form.email.value == '')    isValid = false;

If you want to improve on this basic validation check out this article on javascript form validation from Apple.

**bikeman** · 14-Jan-2008 11:03 AM

I am afraid that doen't work - the form appears to carryout validation but once ok the 'please wait' gif displays in a permanent loop and no file is uploaded.

**johnhunter** · 14-Jan-2008 09:45 PM

Hi Bikeman,

Sounds like the form isn't submitting. Check that you don't have an onsubmit handler in the form tag. I'd suggest having a look at the source code for the example and working back from there.

I'm afraid I can't really help without seeing the source code of your site. If you want to PM me I'll try to have a look.

Regards,
John.

**johnhunter** · 15-Jan-2008 10:00 PM

This line in the javascript allows you to test your script without submitting anything:

HTML Code:

e.preventDefault();// for testing - remove this line!

You should delete this line when you put your form live.

Thread: File upload progress indicator

Thread Tools

Display

File upload progress indicator

An in-page file upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Re: File upload progress indicator

Thread Information

Users Browsing this Thread

Similar Threads

Restricting file type to upload?

File Upload/No recipients problem

upload attachments

upload working but with errors

file upload issue - everything else is perfect.

Bookmarks

Bookmarks

Posting Permissions