Buy Now
Sign in

File Upload with Progressbar - Tutorial

rmeijer , April 10 2010
R
rmeijer 5
April 10 2010 #49889
How to create a File Upload with Progressbar form:

Demo: http://www.fanaticsounds.com/upload-now

Step 1.
Create a processbar first, go to: http://www.ajaxload.info/ or http://preloaders.net/
Save the image somewhere, normally images/stories/.

Step 2.
Create a file upload form

Step 3.
Edit your form in Form Management

A) Go to: Tab - General
B) Form tag attachment add the code:
onsubmit="display_loading();"


C) Go to: Tab - Form Code
D) Form HTML add the code:
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div> 


E) Form JavaScript add the code:
function display_loading() 
{
document.getElementById('loading').style.display = 'block';
}


Step 4.
Save, publish and test it.

Good Luck!

Rogier
O
Origin Corp 5
April 22 2010 #50436
Thank you for the tutorial.

Is it possible to set the image to display for a mimum amount of time, say 3 seconds?
R
rmeijer 5
June 07 2010 #52427
You could try something like:


<script language="JavaScript">
var time = null
function move() {
window.location = 'http://www.yourdomain.com'
</script>


<body onload="timer=setTimeout('move()',3000)">
A
anthonyorigin 1
June 28 2010 #53718
Thank you so much for the tutorial, I have been browsing the net to find one that'll work for me.
Thanks again.
B
britarenae 1
July 06 2010 #54241
That works on me.. Thanks for tutorial.
?
Guest
February 24 2012 #267688
This is a great tutorial, but would anyone be willing to give me some hints for accomplishing this in v4? Not sure where to put the javascript and HTML?

Any help would be greatly appreciated!
GreyHead 63.4
February 25 2012 #267740
Hi lukesoares,

Here's a quick re-write for CFv4. Not tested so will need debugging, please let us know how you get on.

Bob

How to create a File Upload with Progressbar form:

Step 1.
Create a processbar first, go to: http://www.ajaxload.info/ or http://preloaders.net/
Save the image somewhere, normally images/stories/.

Step 2.
Create a file upload form, adding an id to the submit button and noting what it is e.g. input_submit_1

Step 3.
Edit your form in Form Management

A) Add a Load JS action to the On Load event
B) Open the Load JS action and add the code:
window.addEvent('domready', function() {
$('input_submit_1').addEvent('click', function(){
$('loading').setStyle('display', 'block');
});
});

C) Go to the Preview tab and drag in a Custom Element element
D) In the Custom Element add the code:
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div> 


Step 4.
Save, publish and test it.
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
?
Guest
February 26 2012 #267790
Thanks for the quick reply.
I made the recommended changes and I still seem to be lacking a progress bar.

I tried in both Chrome and Safari, and same result.

I feel like I'm missing something as your suggestion should have at least done something. In the meantime, I'll keep at it and see what I can find. Thanks!
GreyHead 63.4
February 26 2012 #267804
Hi lukesoares ,

I updated the earlier post to fix some typos in the script and clean it up and I switched the action from the file load input to the submit button being clicked. This version is working.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
?
Guest
February 26 2012 #267813
That works perfectly.

One note, I had to enable the "Dynamic File" under Load JS. Prior to that it wasn't working. (That's probably normal operation but just thought I'd mention it for future searchers)

Thanks again! You've got a beer coming your way.
GreyHead 63.4
February 26 2012 #267819
Hi Luke,

Just FYI I didn't have 'Dynamic file' set for my test but that could be a result of using different templates.

Thanks for the beer.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
?
Guest
February 27 2012 #267926
So, I've come up with one other "little" issue that I'd like to resolve...

When my users click Submit, I'd like it to hide all the other form elements except for the "Your file is being uploaded" message with progress bar. So the end result is they end up with just a blank page with the progress bar loading. Which of course redirects after the upload to the "Thanks" message.

I'm not so good with javascript, so I'm looking for suggestions or perhaps some hints on where I could find out how to do this.

Thanks!
S
SPABO 637
May 04 2012 #283515
Bob,
This is what I was looking for, however....
My forms are "CUSTOM", so I cannot drag Custom Element in the Preview tab an save it.
So, wher do I leave this code?
<div id="loading" style="display: none">We are processing your upload, please wait!<img src="images/stories/ajax-loader.gif" alt="" /></div> 


The submit button in the forms have this code
<div class="ccms_form_element cfdiv_submit" id="autoID-4e20dbb568aa715b9ec59ab27998c1ab_container_div"><input name="submit" class="" value="Verstuur" type="submit" />


I suppose I need to change the id to eg "input_submit_1"
GreyHead 63.4
May 26 2012 #289918
Hi,

There's an improved version of the Loading gif code here - it includes Luuk's request to hide the body of the form in a later post.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Gatsman 297
February 28 2013 #307398
This is exactly what i was looking for thank you.
Only problem is that (i use it for a text form not an upload form no problem there) if you click the submit button without any text in the field (required field) you get the message "This field is required." but also the loading div shows up and gets stuck there

Any help to avoid that?

I was a little quick on the trigger, posted before following the link
If anyone else has the same problem follow the link in Bob's post above and read the 9th post.


Thanks again Bob
GreyHead 63.4
February 28 2013 #307399
Hi gatsman,

I think that's also in the FAQ about this.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Gatsman 297
March 21 2013 #308584
As i said i use it and it works very good only problem i found is when the user clicks the back button in his browser. In that case the loading image appears and gets stuck again.

It isn't a big problem but is there a way to avoid that?

Thanks again.
John
GreyHead 63.4
March 22 2013 #308612
Hi John,

I had a quick search around and found a couple of threads that might help, I don't have time to try applying them right now so posting here for future reference.

There's a good short article on Mastering The Back Button With Javascript

And some potentially useful code and links in this StackOverflow post.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Gatsman 297
March 23 2013 #308659
Thanks Bob,
I ll have a look and post here if i find a solution.
Gatsman 297
March 23 2013 #308666
Create a "Load JS" and place it in the On Load with this code inside, it will do the trick.

window.onbeforeunload = function (e) {
}


It reloads the page and no loading div appears.

Thanks Bob

John