PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Dynamically Add More Upload Boxes?

  1. 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!

    Posted 12 years ago on Monday January 23, 2012 | Permalink
  2. 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.

    Posted 12 years ago on Monday January 23, 2012 | Permalink
  3. 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!

    Posted 12 years ago on Monday January 23, 2012 | Permalink
  4. 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
    }
    Posted 12 years ago on Monday January 23, 2012 | Permalink
  5. 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.

    Posted 12 years ago on Tuesday January 24, 2012 | Permalink
  6. 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!

    Posted 12 years ago on Thursday January 26, 2012 | Permalink
  7. That's great. Thanks for sharing Robert!

    Posted 12 years ago on Thursday January 26, 2012 | Permalink
  8. 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/

    Posted 12 years ago on Wednesday February 22, 2012 | Permalink