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:
C) Go to: Tab - Form Code
D) Form HTML add the code:
E) Form JavaScript add the code:
Step 4.
Save, publish and test it.
Good Luck!
Rogier
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
Thank you for the tutorial.
Is it possible to set the image to display for a mimum amount of time, say 3 seconds?
Is it possible to set the image to display for a mimum amount of time, say 3 seconds?
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)">
Thank you so much for the tutorial, I have been browsing the net to find one that'll work for me.
Thanks again.
Thanks again.
That works on me.. Thanks for tutorial.
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:
C) Go to the Preview tab and drag in a Custom Element element
D) In the Custom Element add the code:
Step 4.
Save, publish and test it.
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.
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
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
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
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
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?
The submit button in the forms have this code
I suppose I need to change the id to eg "input_submit_1"
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"
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
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
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
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
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
It isn't a big problem but is there a way to avoid that?
Thanks again.
John
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
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
This topic is locked and no more replies can be posted.
