Hi,
Is there any way to add a file upload progress bar so when larger files and uploading someone won't mistakenly click Back or redirect to another site thinking the upload has completed?
Thank you,
Derek
Hi,
Is there any way to add a file upload progress bar so when larger files and uploading someone won't mistakenly click Back or redirect to another site thinking the upload has completed?
Thank you,
Derek
Currently there is no file upload progress bar as it uses the built in PHP file upload capabilities. We plan on enhancing this in the future with a more advanced upload feature.
Hello Carl,
Is this something that a dev would be able to handle if Gravity is not going to do it for a while or will that somehow break it?
I have customers who send me large files for giclee printing in the order of 100 meg usually and if I don't have a progress bar they will just navigate away in the middle of upload.
Thank you
I would also find this very useful. Perhaps someone who knows what they are doing may be able to implement something like this and let us know how to do it?
http://www.bram.us/projects/js_bramus/jsprogressbarhandler/
Cheers
If the developer knows enough he may be able to implement it, although they would really need to know what they are doing to do so without causing additional problems.
Are you looking for an acual progress bar (as in, it reflects the percentage of upload completed) or just an animated gif that keeps spinning, etc. while a file uploads. If you only need the latter -- which should solve the issue of people navigating away before uploading is done -- that's not too hard. Reply back to this and I can post some code for it.
I'm also in the need for such a % progress bar... uploading large files it is a must
Please give this a high priority
Cheers
newport...
I think the loading gif would be sufficient for me, could you post that code you referred to? and also possibly give a little walkthrough about how to implement it into Gravity Forms?
Thank you.
I too am in need of the progress bar (with actual progress), that wil be a very important feature.
But I am very interested in Newports spinning gif solution, could you send me the code and some instructions to add that?
Thanks!
Dan
Hello,
Ditto for me even a animated gif would be better than the current as people just will not wait. They see nothing happening right in front of their faces and instantly assume it is finished and then navigate away. Then I get emails that the form isn't working when the form works fine it just doesn't deal well with impatience!! lol
Thanks
Derek
I think the animated gif would be fine for me too, just letting people see that it is still in progress.
Please give this a high priority .I'm also in the need for such a progress bar
We need this feature.
A simple animated gif file would suffice for us. We're willing to edit the code and implement a hot fix.
Does anyone have some detailed instructions?
Also chiming in for a progress bar. Please send code for the animated gif. Thanks for your time.
Okay, so everyone's looking for some kind of preloader solution.. even something simple to emulate one. With that in mind, I took about 10 minutes to experiment and came up with a really quick fake progress bar using a little jQuery, some CSS and an animated gif file.
I put together a quick screencast demo so you can see it in action.
Here's the how.. First, I went over to http://www.ajaxload.info and grabbed a niftly animated gif preloader. Then I added the following CSS to the top my page template. Of course, it's always tidier to add it to your theme style sheet so I'd recommend putting it there but either way works.
<style type="text/css">
#fakeprogress {
background-color:#ceecff;
border:2px solid #ADDEFC;
background-image:url(http://www.yourdomain.com/wp-content/themes/ThemeName/images/ajax-loader.gif);
background-repeat:no-repeat;
background-position:center 65px;
height:120px;
width:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-200px;
z-index:100;
}
#fakeprogress h2 {
text-align:center;
margin:0;
padding:25px 0 0 0;
font-weight:bold;
font-size:24px;
font-family:sans-serif;
}
</style>
Next, I added this jQuery snippet to the page template as well. You may prefer to put it in the actual header.php file in the head section. This assumes you're already loading the jQuery library. You'll want replace the "gform_wrapper_1" to reflect your actual form/wrapper ID.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#gform_wrapper_1").after("<div id='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>");
$("#fakeprogress").hide();
$("#gform_wrapper_1 .gform_footer input").click(function () {
$("#fakeprogress").delay(3000).show('slow');
});
});
</script>
This basically adds a div to your page and hides on on load. When the form button is clicked.. it waits 3 seconds (usually time enough for the validation to run) and then fades the progress bar div in.
NOTE: This doesn't check to see if there is a file upload field or not.. it's not smart or fancy shmancy.. it just runs on click. If you want to use this as is, only put it on a form with a required file upload field. With some work, I'm sure someone who knows what they're doing could run with the idea and do something nicer.
Like I said, it's just one way of going about it.. not polished by any means, but was intended to get your creative juices flowing. Hope it helps out.
--------------------------------------------------------------------------------------------------
NOTE: this method probably won't work if you you're using the new AJAX submission option. The div should show on click, but won't disappear when the form is submitted without refreshing the page.
--------------------------------------------------------------------------------------------------
Wow. So timely. I bought Gravity Forms hoping something like this existed (and was bummed when I saw it didn't). You've really made my day with such a simple and easy to implement interim fix. My thanks to you.
This is great, but I don't know anything about Jquery. This is the short code in my page: [gravityform id=1 name=ShootFor Good 2010 Upload Form]. So what should I change "gform_wrapper_1" to? And will this work if I put it in the theme's header.php file? Thanks.
steve
yes, you can put the code snippet in your theme's header.php file. Since your form ID = 1 then "gform_wrapper_1" is appropriate.. the "_1" denotes the specific form ID.
Thanks. So that means that I can just cut and paste the above script and put it in to the head of my header.php file? I tried that and I can't seem to get it to work. The URL to the form page is: http://www.shootforgood.org/share. Any help you can give me would be appreciated. Thanks.
-steve
Steve.. haha. I didn't realize it at first, but I already had your site open because I was interested in the event.. neat idea.
Not 100% sure here.. at least part of the script is working.. it's writing the fakeprogress div out.
You might try this instead.. using the specific id for the button. Just replace the other script block with this one.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$("#gform_wrapper_1").after("<div id='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>");
$("#fakeprogress").hide();
$("input#gform_submit_button_1").click(function () {
$("#fakeprogress").delay(3000).show('slow');
});
});
</script>
That is funny. Thanks for checking us out. And thanks for your help and making a great plugin. How do I figure out what the specific button id is?
-Steve
You would need to view the source, find the button element and grab the id that's specified there.
I had already included the proper ID for your form in the example above.
Been looking around for a fix for this. I have a mp3 upload option and a progress bar would be really cool... Any hopes for this in the future. By the way, thanks for all the hard work. The PayPal feature is great. Still need to dive into it more, but so far, so good.
We'll be adding a flash-based upload tool at some point which will allow for multi-file uploads, progress bar, etc. It's on the drawing board, but I can't really tell you right now what release it's going to be in.
We have a ton of features we still want to add and are also busy developing other add-ons as well as some new products. We'll get it in there as soon as we can.
That would be great. Thanks for the response. Question... without getting too far off track. Is it possible to have the files uploaded to a specific directory instead of the default gravity, etc... ?
Yep, you can use a filter to change the upload path. Just modify it to your preference and add it to your functions.php file.
example:
<?php
add_filter("gform_upload_path", "change_upload_path", 20, 2);
function change_upload_path($path_info, $form_id){
$path_info["path"] = "/new/path/";
$path_info["url"] = "http://new_url.com/images/";
return $path_info;
}
?>
Be sure to specify the full server path to your directory, and also the full URL as well in the path variables.
Good one thanks.
+1 for a file upload progress bar - any news on the progress of the flash based option with multiple select mentioned above about 3 months ago?
Thanks!
+1 for upload progress bar!
No news on a flash-based file upload at this point. We've been busy with the release of the new 1.5 version along with the User Registration Add-on and other updates.
A multi-file uploader with progress bar, etc is still on the list but it will still be a little while until we get that implemented.
Kevin,
I used the code you provided above and it worked like a charm. However, I have more than 20 forms, with different IDs, and different submit buttons (same button but w/ /different IDs). How would I go about specifying every form and button in the above code, so that I get the #fakeprogress div showing on click on every form I have?
Thanks!
You should be able to simply convert the unique ID's in the previous sample to use generic class names instead. That way you could apply the script to all of your forms. Something like this.. (should work but I haven't tested it)
[js]
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".gform_wrapper).after("<div class='fakeprogress'><h2>Uploading Files.. Please Wait</h2></div>");
$(".fakeprogress").hide();
$(".gform_footer input.button").click(function () {
$(".fakeprogress").delay(3000).show('slow');
});
});
You'll need to adjust any CSS rules to reflect the changes as well.
Pretty please can you make a nice flash upload progress bar?
It would make my year, fact!