This walkthrough is quite old at this point and may not work correctly. It wasn’t great for every circumstance initially and it had mixed results with readers. I’ve turned off the comments on this post.
Use at your own risk.
Advanced Custom Fields is a handy interface for creating post types and meta fields. Gravity Forms is a wonderful front-end form builder – you can even create posts from the front end with it. I recently helped a client connect the ACF Gallery Field with the Gravity Forms File Upload field for front-end submissions.
Check it out here:
Note: This assumes you’re using gravity forms to create a new post on submission, if you’re simply trying to upload a file(s) to the media library, use this other gist, which could be used to update an existing post – you will still need to provide a post id, since ACF is a custom field for a post.
Updated 3-29-17: I’ve updated the media file function into a class (below), which is now reflected in the code above as well.
A key element in the above function is another handy function for programmatically creating an image in the media library. Gravity Forms doesn’t save file uploads into the standard uploads folder (instead it ends up in a sub-folder) and doesn’t automatically create an “attachment” post type within WordPress. This function takes the images uploaded and creates an attachment within the media library.
Featured Image via CC License by Pavlina Jane
Comments
58 responses to “Connect Gravity Forms File Upload to ACF Gallery Field”
Hello.. thanks for sharing your code.. i tried to implement it but i can’t get it to work. I copied the set-post-fields-gf.php into my functions.php file, as well as the additional function jdn_create_image_id. Both in functions.php.
I’ve also changed the ACF gallery field ID, gravity forms ID and the file upload field ID.
I could then submit the form, but the image is not appearing on the gallery.
Am I missing something?
Thank you.
Rocky,
Happy to help. Can you throw your code into a gist and share it with me? I’ll test this code again tonight to be sure I didn’t fat-finger anything.
Thanks,
Joshua
Hi Joshua,
Thanks for replying. Basically the code is same as yours, all i’ve changed is the gravity forms ID, GF Upload Field ID, and the ACF field ID.
I’ve turned on WP Debug and found no error messages.
You can find my functions.php in here:
https://gist.github.com/rockymenteng/e82b1cd08b747d910384
(sorry, however, i’ve changed the file language in gist to php but for some reason it keeps reverting back to ‘text’)
Thanks Joshua for the help.
Cheers,
Rocky
thx for the code! I have de same problem… don’t work when i try to send the form. The form is loaded and not continuous. I get this error in the inspector Failed to load resource: the server responded with a status of 500 (Internal Server Error)
some idea?? Thx ^^
Hey guys,
Apologies for the confusion on this – I think there are two potentially issues.
First, this code assumes you’re using Gravity Forms for a front-end post submission (creating a post), so if you’re just using it to upload images without a post_id associated with the form submit, it won’t work. If that’s the case, use this gist instead.
Second, there is the issue of WordPress being in a subdirectory for the image id creation (if that’s the case it won’t work correctly either). I’ve updated the
jdn_create_image_idgist to account for either condition. Please use the update code.I’ve updated the post above accordingly. Let me know if that works!
Cheers,
Joshua
THANK YOU FOR THIS!
Hey – I edited this code to include thumbnail resizing for default and custom thumbnail sizes and better path logic and works better now with making sure GF upload path is same as wp-content/uploads and have example on how to update repeater field.
https://gist.github.com/adamplabarge/e8ee6289980f23880e58
Adam,
Awesome! Thanks for sharing this modification, that’s slick stuff. Glad it helped out!
Cheers,
Joshua
This works perfectly for Galleries… But is there a way of doing the same for File or Image fields?
Andrew,
Don’t see why not. The current code checks that the entry field is an array and then loops through each image. I’m not sure off the top of my head how it stores single files/images, but you would likely just need to remove some of the foreach loops stuff and do it for a single image field.
If I have some time this weekend I’ll play around with it and report back. Let me know if you figure it out sooner.
Thanks,
Joshua
Hi, I was wondering if you figured out how to get it to work with a single image field. I can’t seem to get it to work.
Tiffany,
If you’re creating a post on the front end and associating an image with the post’s featured image, there is a Gravity Form field for that. If you’re trying to associate a file upload field with an ACF image field, you can use the code above with some minor adjustments. Something like this should work.
Let me know if you have any questions/issues!
Cheers,
Joshua
Hi Josh. Thank you for the quick response. I probably should have been more specific. So I’m using your other gist (https://gist.github.com/joshuadavidnelson/591b8d31d5fab8b083f3) for uploading media without a post submission, (but I’m posting here since it’s more active), and I’m trying get it to work with a Gravity Forms field that doesn’t allow uploading multiple images. But it only works if the image upload field has “Enable Multi-File Upload selected”. I tried to accomplish that with the code you sent but wasn’t successful.
I appreciate any insight you can offer.
Thanks!
Tiffany,
Ah, ok. I just realized that “other gist” wasn’t quite complete – it wasn’t storing the data anywhere, just collecting the images into an array. If you’re not creating a new post on the form submission, you still have to associate the field to a post id. ACF is set up to be a field associated with a post (custom post fields), so you’d either need to have a field specifying the post id of an existing post, or be creating a post on form submission. I’ve updated the gist accordingly, and the post above, but I don’t think that addresses your issue.
If you’re just trying to upload images via Gravity Forms (not associated with a post or a post’s ACF field), then this gist should do the trick. It just creates a media file in the library for the image uploaded to the field. You could also take a look at Adam’s comment.
If that doesn’t work for you, feel free to email me a gist with your code and we can dig into it a bit further via email instead of over comments.
Cheers,
Joshua
Hi Josh, thank you for the quick response. I tried to get what I needed from the code you provide but was not successful. I am using your other gist for saving the upload to the media library without post submission. I’m trying to get it to work with the gravity fields file upload without the multiple file enabled. Its for a front end form where users should only be able to upload one image. Thanks!
Hi Josh! I couldn’t respond to your latest reply, so I’m replying to this one instead. “This gist” worked perfectly! Thank you so much for your quick and helpful responses!!!
[…] I mentioned this code in a previous post, where I outlined how to link Gravity Forms with ACF Gallery fields. […]
Cant get it to work…nothing happens (not even the image gets submited to the media lib…)
ust 2 be correct:
$gravity_form_id = 2; ->> i get it from the form it has the id on it
$gf_images_field_id = 13; ->> i get it from the field on the form it has the id on it
$acf_field_id = ‘field_5640d510647fd’; ->> i used the firebug to test agaist the field on the upload backoffice field (on the post)
right ?
both ur codes go into functions.php right ?
my debug says
Notice: Use of undefined constant ‘post – assumed ‘‘post’ in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 149
Notice: Use of undefined constant thumbnails’ – assumed ‘thumbnails’’ in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 149
Notice: Undefined variable: name in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 155
Notice: Undefined variable: width in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 155
Notice: Undefined variable: height in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 155
Notice: Undefined variable: cropBoolean in /home/arquitek/public_html/toppromomkt.com/wp-content/themes/toppromo/functions.php on line 155
Bruno,
You could put these snippets in your
functions.phpfile, though I’d recommend you place them in a separate custom plugin. It looks like you’re likely pulling the correct form/field ids, yes. Your debug results indicate you have additional code and variables not part of the above snippet above that are returning undefined (name, width, height, cropBoolean, thumbnails) and the entry isn’t grabbing the $post on line 17 above – this means that you’re not creating a post when you submit the form (see more about the GF Entry Object), which is how this snippet is set up to work. Are you simply trying to generate a media file on submit, not connected to a post?Generally undefined errors can be cleaned up with a quick
if( isset( $variable ) )check above those lines to stop the error, but also likely stop the code from working completely. I’d recommend you utilize a log function to print some values and variables into the debug log so you can work your way through your code.You can put your final into a gist and I’m happy to take a quick look, but beyond that it might be something you’ll have to reach out to Codeable or WP Questions for further help customizing.
Thanks,
Joshua
Thanks Joshua, i am running it on wp questions but the best i can get it to work is to send the files to my media lib. … i now need to get the id and send it to the database ..(it still reads the old gf path) and theres now on _wp_attached_file the new path 2015/11/moric51.png …. im trying to solve this for a week now still no sucess :/
u said im not creating a post ? but when i submit the form my custom post is filled with that info…only the images are not uploaded to my custom post
im using this code to save to media lib
https://gist.github.com/brunoalex/723e712f6c26a8feef1e
but i cant get the database to read the id of the image attachement …
my id reads the old gf path :
field_5640d510647fd http://www.toppromomkt.com/wp-content/uploads/gravity_forms/2-f514248af81d6111fa685430cc78a2dc/2015/…
but now the image is on database like this :
_wp_attached_file 2015/11/img116.png
Bruno,
Unfortunately I can’t help much further, it looks like you’re issue could be due to a myriad of issues specific to your setup. Or, perhaps there’s been an update to GF or ACF that invalidates the code above (less likely). I would extend my services, but I’m currently booked out for months. I hope the guys at WP Questions can help – let me know!
Cheers,
Joshua
I get this error:
Invalid argument supplied for foreach() in //wp-content/plugins/acf-gallery/gallery.php on line 109
Alvaro,
The gallery add-on doesn’t check that the
$fields['value']is a valid array. So, it appears in your case, the value is being passed either unset or incorrectly (not an array). It could be that you’re running the first code snippet in this example without the second one, but I would expect it to just not work, not necessarily give you an error.Can you give me more information to run with? Are the
$gf_images_field_id,$gravity_form_id, and$acf_field_idvariables correctly set?Thanks,
Joshua
Hi Josh,
This is exactly the type of thing I was looking for, a client wants to upload photos without going to the backend (they are afraid they will break something 🙂 )
I am having what I think is a dumb issues (still kind of new to ACF), but when I add my post the photos are getting into ACF properly, but no photos are appearing on the post itself, so I am sure I need to add code to have it appear, just not sure where or what code to add…can you offer any input?
Site is in development located at thepurpleposse.klkwebservices.com
Thanks!
Hi Josh,
Did some additional research on ACF site and Google, and got it work….
Thanks for your efforts on this code!! Works GREAT!!!
Ken
Ken,
Glad you got this working for you! Was there anything missing from my example or did your use case require a change specific to the situation? Appreciate the feedback.
Cheers,
Joshua
Hi Josh,
The only thing I would say missing is the code that should go into the page/post you want it to appear on (even if basic code from ACF documentation to get the data to appear on your page/post).
That is what I did, and to be honest I don’t use ACF as much as I should and am still learning a lot with WP.
Once again, thanks for your time on writing the code!.
Ken
Ken,
Thanks for the feedback! I’m hoping to get a more thorough walkthrough together (and maybe, someday, a plugin) on this topic. I’ve been swamped with work for a few months, and it looks like it’s going to be that way for a few more, but it’s definitely on my to-do list.
Cheers,
Joshua
This is pure gold, it worked great! Using ACF plus Gravity Forms + Custom Post Types plugin was able to accomplish this. Thx a lot!
Hi Daniel,
Any chance you can share your code that you have this working with ACF, GF+CPT? I had this code working on a dev site, now when I look at the live site, it is no longer working so I am trying to get it to work again.
Thanks!
Ken
Hi Josh.
Great bit of code! Works great! Have you tried to make it work in reverse?
I’ve got a situation where the author of the post needs to be able to go back into the original post and edit it on the front end.
The front-end field pulls the post data to edit, including the previously uploaded files into the file upload field. The images show up but they are garbled. I removed the JSON decode on line 27, which makes them viewable (thumbnails and names).
So far, so good.
You can delete the photos and upload new photos, but on save it wipes out the gallery field on the backend. The photos that were there, are gone and the newly uploaded ones don’t show up.
Any thoughts?
Russell,
I think reversing this code is probably a bit more complicated, but I’d be happy to take a look. Can you link to or email me a link to the code in a gist or CodePen?
Cheers,
Joshua
Hi. Firstly great bit of code. I have a couple of problems though. Whilst the images appear in the Gallery Field if I then try to regenerate the images sizes it says the image doesn’t exist. Even though it shows in front end and backend.
Although when I view the image in the Media Library it doesn’t show as a thumbnail there either. So, at the moment I can display the full sized image in the frontend but really want to be able to display other sizes.
Any ideas?
Alan,
Lines 71-81 of the
create-image-id.phpsnippet deal with attaching the media’s metadata, which is necessary for it to appear in the Media Library correctly (as well as thewp_insert_attachmentcall before that). If you follow that code up from there, you’ll see a few other checks that have to clear for the function to successfully add the image as an attachment. It sounds like somewhere in there it’s not working completely.It’s also possible you have another plugin intercepting the file and stopping it from generating the thumbnails. You could try using the Regenerate Thumbnails plugin to see if it will create them that way, but that’s not a longterm solution.
I’d suggest placing an error logging function in there and checking the debug log, see if you can determine where it’s failing.
Hope that helps, let me know if you have any other questions.
Thanks,
Joshua
Thanks for getting back to me and sorry for the late reply. Firstly I’m just using a development site with the basic TwentySixteen theme and the ACF Pro and Gravity Forms plugins so there shouldn’t be anything that would interfere with anything.
It’s all a little strange. Firstly when I use your original script it doesn’t move the image to the uploads folder. It just accesses it from the “gravity_forms” folder. When I use the revised script as outlined here https://joshuadnelson.com/connect-gravity-forms-file-upload-to-acf-gallery-field/#comment-10837 then it appears to add it to the Media library and ACF Gallery field but does appear to create the image sizes.
It is adding the image to the Uploads directory but even if I then try to regenerate the thumbnails it says “z4-3” (ID 86) failed to resize. The error message was: The originally uploaded image file cannot be found at /var/sites/d/mysite.co.uk/public_html/dev/testsite//dev/testsite/wp-content/uploads/z4-3.jpg
I do have the development site in a subdirectory i.e. mysite.co.uk/dev/testsite
But that shouldn’t matter should it?
Hi Joshua.
I’ve just done a few more tests and here’s where the problem is. When you have your WP install files at root level then everything works as it should. If, however, you have your WP install files in a subdirectory then it doesn’t work. The images do appear to be there in the ACF Gallery field but they are not correctly added to the WP Media Gallery and therefore thumbnails are not generated.
I try to always install my WP install files in a subdirectory, for a little bit of extra security.
Any ideas? Alan
Alan,
Ah, lines 32-37 of
create-file-id.phpbuild the correct upload path based on if the site_url and home_url match (if they don’t, then it’s in a subdirectory install) and assumes this code is placed in a plugin’s root folder. (Update: I previously and incorrectly said theme folder here, which is not correct)I don’t have time to debug this right this second, but that’s likely where I’d track the bug back to if I could. I’d suggest updating this function to be more specific to your install (determine the upload directory’s path and hard-code it).
As mentioned at the beginning of the post, this code worked well for the application I originally created it for, but there have been issues getting it to work on other site setups. I’m hoping to finish up a new post with a fresh approach, so let me know if you find a solution that works for you.
Let me know if I can help further, happy to continue this conversation over email, too.
Thanks,
Joshua
Hi. Apologies for the previous comment. For some reason my browser was caching an old version of this page and therefore I hadn’t seen that you’d already replied!!
Anyway, I’ve just had another play and managed to get to this point:
The path I needed was:
/var/sites/m/mysite.co.uk/public_htmlSo by changing the home_path code to this:
$home_path = dirname( dirname( dirname( dirname(dirname(dirname( __FILE__ ) ) ) ) ) );
It all seems to be working correctly now.
The one thing I have noticed though is although it appears to be working correctly, it’s not adding the images to the WP Media Library. I.e. the path to an uploaded image is mysite.co.uk/site/wp-content/uploads/gravity_forms/1-6efb927c86cbea7588368ef96c9d9bd4/2016/08/testimage-150×150.png
No worries, I’ve been fighting caching issues lately!
The path for the upload isn’t changed (the image(s) aren’t moved). However, the code snippet Adam placed in a comment earlier shows how you can update the default gravity form upload folder, so you could place it in the default uploads folder.
Hope that works, glad we were able to figure it out. If you have any other issues, feel free to reach out directly via email (josh [at] this domain).
Thanks Josh. Really appreciate your help with this and for creating a great little bit of code. I’ve been using Contact Form 7 for years now and only now am realising how powerful Gravity Forms can be.
Thanks for this Josh! It’s exactly what I was needing, and Adam’s comment above really added to the functionality.
I think a plugin for this would be fantastic. I know there are a lot of folks out there trying to figure out how to make this happen.
Doug,
Thanks, glad to hear it was helpful. Updating this post, or more likely writing a new tutorial, is on my list of to-dos – as is bundling it into a plugin. I have just been far too busy for a while between work and family needs. Hopefully in the next year at least!
Cheers,
Joshua
What I can’t understand is, when using Adam’s revised code above, the image gets added to the Media Library but when I view it in the Media Library the thumbnail is missing and when I attempt to regenerate the thumbnails it says the file does not exist. Even though the image is there:
http://www.mysite.com/site/wp-content/uploads/2016/11/testing-wuinunerg.png
Would it have anything to do with my WordPress install being in a subdirectory i.e. /site/ but the site URL being at root?
Really doing my head in!!
Any ideas? Thanks in advance.
Terry,
My original code for the
create-image-id.phpfile, lines 33-37 attempts to solve that issue. I haven’t had a chance to study Adam’s code too deeply, but it looks like thechange_upload_pathworks for a standard install. Modifying that for your subdirectory should solve the issue.Best of luck!
Joshua
Doh! Please ignore me. One of those days. Your code works perfectly well. I’d changed that path in a previous project I’d used it and hadn’t changed it back to your original code!! Thanks again for this great bit of code.
Would be amazing to get this working with single image fields as well at some point.
Joshua,
I’m working on developing a project that requires users to upload multiple photos, and ideally I’d like to display a nice gallery on the front end. Unfortunately, my experience with custom fields is usually Types or just raw code; I haven’t used ACF. So, I was wondering if you had any screenshots of the interface or user flow? My main concern is what the user experience will be. Do you have time for a quick chat this week?
Gina,
Unfortunately, I’m slammed this week and next, but I can try to help out via email or we can try to connect further down the way.
In terms of screenshots, the interface is based on your form/theme. The user uploads images via a form. This code handles the connection of Gravity Forms and ACF, so that the custom fields are populated from the front-end form. Nothing in this walkthrough is front-end related, you’d have to build that yourself.
Thanks,
Joshua
Thank you a million for this 🙂 Works perfectly!
Hi, is it possible to use your code (set-post-fields-gf.php) to upload file (PDF) as Post attachments?
Azmir,
Gravity Forms has a “Post Image” field that allows for the upload of a file (specifically an image) to be associated with a post. However, you can only link an image file to the post as a “Featured Image.” You would need to create a custom field to associate a pdf to a post via post meta.
You could also try modifying my code above to use something like this: https://gist.github.com/joshuadavidnelson/acfed1e71a9c69166e77a0c7799af6b6
There are a few other gists in the comments for different conditions, so if those two options don’t work I’d suggest trying some of the others.
Hope that helps!
Thanks,
Joshua
Hi Josh, thanks for the reply. I tried to use Gravity Forms’ “Post Image” but received the error below:
“The uploaded file type is not allowed. Must be one of the following: jpg, jpeg, png, gif”
I tried adding pdf within Gravity Forms’ js.php as below but doesn’t seem to work:
Line 694: field[“allowedExtensions”] = “jpg, jpeg, png, gif, pdf”;
Any pointer on how to implement posting PDF as attachment? Thanks.
Azmir,
It turns out you can’t associate a non-image file as the “Featured Image,” as I suspected. As such, you would need to create a custom field and associate the uploaded file to the post via the custom field. I’ve updated my previous response and the gist linked there.
Best of luck,
Joshua
Josh I have been searching for something like this. I have a scenario where I have been using a directory plugin for listing of businesses on a local blog. The plugin comes with the ability to create new listings and add images to a custom field (image_gallery_ids) that is displayed as a gallery. The custom field holds a value that is the image id. They have recently decided to allow front end submission so I have built a Gravity Forms form that now allows a user to create a new post as a draft and have mapped the image upload to this custom field. I have the form working as expected except the image upload is storing the image url as the value instead of the image id. Any suggestions on how I could change this to work for me?
Ben,
Are you using my code above or something else? The code above should be storing the image id, not the url. Lines 37-39 in
set-post-fields-gf.phpplaces the image ids into an array ($gallery) and updates that (ACF) field value to this array of ids – never using the media file urls.If you just used the Gravity Forms UI to map to a custom field, that won’t work. Gravity Forms saves the url to the entry field’s value (so you’ll have an array of urls, no ids, because it doesn’t create a media file with an id – so also nothing in your media library).
JDN_Create_Media_Filetakes the image url value, creates a media file (attachment) and returns the new attachment id. See lines 96-104 oncreate-image-id.phpfor example usage. You’ll probably need to do something similar to what we’ve done in this post, but with an upload field not mapped to the custom field – your custom code would handle that similar to the ACF Gallery code above.If you run into issues, feel free to pop your code into a gist and I can take a look.
Cheers,
Joshua
Hi Josh,
This is exactly what I’ve been looking for, thank you so much for making your work public.
I have however got a problem, I’m using the latest version of ACF Pro, Latest version of gravity forms. The gallery is the last part of my fairly long form to complete.
I’ve added your code to my gravity-functions.php ( which is called into functions.php ), I’ve changed the form Id, Field ID and ACF field ID.
I upload a couple of images via my form and submit the form, although It says the images have uploaded and i can see two blank image spaces in the posts gallery field……….the images do not upload properly, It gets the file name etc but the file size is 0kb.
I see other people have had the same issue over the years but couldnt see a solution.
Is there an easy fix for this ?
Thanks very much for your time.
Hi Josh,
Thanks for this code. I think it’s just what I’m looking for. However, I’m having a real problem getting it to work. Could you please outline a very simple step-by-step guide for how to implement?
I have
Gravity form – Form #: 2; Field #: 6 (field 6 is an image upload)
And ACF Gallery image field#: field_5a2696888de11
I copied the your above code and replaced:
$gravity_form_id = 1 with $gravity_form_id = 2
$gf_images_field_id = 1 with $gf_images_field_id = 6; and
$acf_field_id = ‘field_546d0ad42e7f0’ with $acf_field_id = ‘field_5a2696888de11’
Many thanks
Patrick