I'm wondering if you could give me any direction in developing a way to dynamically add additional file upload boxes to a gravity form. I'm thinking that maybe the simplest way to do it would be to add a large number such as 10-20 and then hide them using css and unhide them with jQuery. A button could be used to un-hide them one at a time.
Is there a better way to achieve this? I'm not so great at back-end development, so this is the only thing that came to mind.
Thanks!
Richard Vav
Administrator
Hi Robert,
Currently there isn't a better way, I used a drop down asking how many files they want to upload and then used conditional logic to show the correct amount of upload fields.
Now that wordpress 3.3 has been released the Gravity forms team are working on integrating with the new plupload based upload facility that was added to the core but we haven't heard yet which version they are looking to release it with.
Alright, thanks for the reply. I'm going to try my css/jQuery idea tomorrow and see how it works out. If it doesn't seem user-friendly enough I will try doing it the way you did. If anyone else has any ideas I'd love to hear them!
I was able to get this working pretty well I think. You can see an example of what I've done here:
http://www.coolwave.com/test/shop/banner-design/
Basically all I've done is add a HTML section to the form and included this jQuery snippet http://www.pastie.org/3239043 along with a button that has the ID of #add
To make this work I've added the class of .hidden-up to each of the extra file uploads. I also added a notification box with the same class using another HTML section to notify the user when they've reached the maximum number of uploads allowed.
Any feedback on this is welcome and appreciated. The site is still a work in progress so don't be too harsh on the visual aspects. :)
Edit: I also added a bit of CSS to my main style sheet to prevent the extra uploads from showing on page load. The following seems to solve the issue:
.gform_wrapper ul.gform_fields .hidden-up{
display:none
}
Richard Vav
Administrator
Hi Robert,
It's looking good and the maximum uploads alert at the end is a nice touch, I may have to pinch that idea :)
Are you restricting the file types that can be uploaded, if so you might consider adding a little note somewhere close mentioning which extensions are ok. That's really the only thing I can think of.
Richard,
Thanks! Yes, we are limiting the file types and you're right we should include a notification. I'll add that tomorrow. The only other thing I might do is adjust the animation jQuery is using during the unhide. It's a little unrefined and could easily be improved. Other than that, I'm probably going to reuse this method on other projects until the multi-upload gets added to GravityForms. Feel free to steal it!
That's great. Thanks for sharing Robert!
Hey everyone, I took down the original test site but a live example of this can be found here: http://www.landingpower.com/order/landing-page/
