July 14, 2023: Updated to ignore the
{apc_media}merge tag to avoid overriding it.November 21, 2022: Added support for specifying container markup via the "markup/container" parameter. Added
gwmfmt_tagsfilter for creating custom tags (like{filesize}).October 19, 2021: Fixed an issue in the new feature introduced in 1.7.2 where global formats setting could overwrite form specific settings.
October 8, 2021: Added a new option
formatsto parse merge tags in non-html contexts.October 1, 2021: Added support for
{all_fields}merge tag.September 20, 2021: Fixed issue where offset and length were not automatically determined if length was excluded from the merge tag.
April 16, 2021: Migrated to Snippet Library.
November 22, 2018: Added support for applying markup to specific fields on a specific form.
January 19, 2017: Fixed typo. Thanks, Tanguy!
July 9, 2015: Updated to automatically integrate with GP Preview Submission.
February 19, 2015: Fixed issue with GF 1.9 where merge tag was being replaced prematurely and incorrectly
Post generated with this snippetGravity Forms v1.8 adds support for the much desired multi-file uploads field. Just add a File Upload field to your form, check the “Enable Multi-File Upload” setting on the field, and just like that, you’ll find yourself in multi-file upload heaven.
Like every other Gravity Forms field, the Multi-File Upload field has a merge tag that can be used in Notifications, Confirmations, Post Content Templates, and more. It looks something like {Files:2} (where “Files” is the field label and “2” is the ID of the field).
By default, this merge tag will output a simple list of the file URLs that were uploaded.
http://myurl.com/../Tulips8.jpg
http://myurl.com/../Penguins11.jpg
http://myurl.com/../Lighthouse11.jpgThis isn’t a very pretty (or useful) way to display these files for the end user.
This snippet provides a simple way to provide custom markup (HTML) templates for displaying these file URLs. Image URLs can be displayed as images, video URLs can be loaded as playable videos, PDFs (and other text file types) can be stylized more attractively to indicate the file type, and so on. The possibilities are endless.
How do I get started?
- Make sure you’re running Gravity Forms v1.8 or later.
- Already have a license? Download Latest Gravity Forms
- Need a license? Buy Gravity Forms
- Copy and paste the snippet into your theme’s functions.php file.
- Review the usage instructions below to configure the snippet for your needs.
Basic Usage
Applies default markup to all forms.
gw_multi_file_merge_tag()->register_settings();Exclude Form(s)
Applies default markup to all forms excluding the specified forms.
gw_multi_file_merge_tag()->register_settings( array(
'exclude_forms' => 2 // multiple forms: array( 2, 4 )
) );Specific Form
Applies default markup to a specific form.
gw_multi_file_merge_tag()->register_settings( array(
'form_id' => 402
) );Specific Field(s) on a Specific Form
Applies default markup to a specific field on a specific form.
gw_multi_file_merge_tag()->register_settings( array(
'form_id' => 123,
'field_ids' => array( 1 ),
) );Specific Form w/ Custom Markup
Applies custom markup to a specific form. If the snippet has also been configured to apply the default markup to all forms, the markup provided here will override the default markup for this form.
gw_multi_file_merge_tag()->register_settings( array(
'form_id' => 402,
'markup' => array(
array(
'file_types' => array( 'jpg', 'jpeg', 'png', 'gif' ),
'markup' => '<div class="gw-image"><a href="{url}" class="gw-image-link"><img src="{url}" width="100%" /></a><span>{filename}</span></div>'
),
array(
'file_types' => array( 'mp4', 'ogg', 'webm' ),
'markup' => '<video width="320" height="240" controls>
<source src="{url}" type="video/{ext}">
Your browser does not support the video tag.
</video>'
)
)
) );Parameters
form_id (int)
The ID of the form to which this snippet should be applied. Defaults to false. If you want to apply this snippet to all forms, do not pass this parameter.
field_ids (array)
An array of field IDs (belonging to the passed
form_id) to which the markup should be applied.exclude_forms (int|array)
A single form ID or array of form IDs that should be excluded from this snippet. Defaults to array().
markup (array)
An array of arrays, with each child array having a ‘file_types’ and ‘markup’ property. See the Default Markup section for default values.
file_types (array)
An array of file types for which this markup should apply.
markup (string)
An HTML-based template for how the file type should be displayed. See Markup Merge Tags for a list of available merge tags that can be used in this template.
Default Markup
Here is a list of the default markup that comes packaged with the snippet. Default support is limited to images (“jpg”, “jpeg”, “png” and “gif”) and videos (“mp4”, “ogg”, “ogv”, “webm”). If you’d think there are more file types that should be supported, leave a comment with the file type and suggested markup.
'exclude_forms' => array(),
'default_markup' => '<li><a href="{url}">{filename}.{ext}</a></li>',
'markup' => array(
array(
'file_types' => array( 'jpg', 'png', 'gif' ),
'markup' => '<img src="{url}" width="33%" />',
),
array(
'file_types' => array( 'mp4', 'ogg', 'webm' ),
'markup' => '<video width="320" height="240" controls>
<source src="{url}" type="video/{ext}">
Your browser does not support the video tag.
</video>',
),
array(
'file_types' => array( 'ogv' ),
'markup' => '<video width="320" height="240" controls>
<source src="{url}" type="video/ogg">
Your browser does not support the video tag.
</video>',
)
)Markup Merge Tags
The markup parameter supports the usage of the following merge tags which provide access to information about the uploaded file. See the Default Markup section and custom markup usage example for examples of usage.
http://myurl.com/.../Tulips8.jpg
{url}The URL of the file (i.e. “http://myurl.com/…/Tulips8.jpg”).{filename}The name of the file (i.e. “Tulips8”).{basename}The name of the file including the extension (i.e. “Tulips8.jpg”).{ext}The extension of the file (i.e. “jpg”)
Return Specific Images
Using the :index merge tag modifier, you can return specific images when using the multi-file merge tag. It accepts two parameters: the offset (aka, which index to start from) and the length (aka, the number of files to return from that starting index).
Here’s a few ways you can use it!
- Return only the first image.
{Upload Your Images:4:index[0]} - Return the first and second image.
{Upload Your Images:4:index[0,2]} - Return the 3rd image and up to 99 subsequent images.
{Upload Your Images:4:index[2,99]}
Improve the File Upload Field in Forms
If you want to improve the look and feel of the File Upload fields in your forms, check out GF File Upload Pro. It enables image previews, file icons, cropping and re-cropping, maximum file counts and sizes, and more!
Summary
If there are more file types that should be supported, leave a comment with the file type and suggested markup. And if you use it and like it, let me know!
Did this resource help you do something awesome with Gravity Forms?
Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.
One more cuestion, please:
Trying the demo I loved something you have… how can I get a link for the recent created post in the confirmation text?
Something like: Your post has been created. View your post here!
Thanks again
Any ideas?
Here’s a tutorial on this: https://gravitywiz.com/include-post-permalink-gravity-forms-confirmation-notification/
Hi,
This is great!!
Please http://pastie.org/8663655 is not accesible at this time to get php and css… can you please give a new url for downloading?
Thanks!!
Hi Corporatic,
I’ve updated the link with a Gist version of the PHP and CSS. Sorry about that!
Thanks a lot!!
Hi is this what I need in order to make form image uploads appear as image preview in gmail (where client gets notification) she wants to see the preview image without having to click the link.
Hi Amanda, this will definitely allow you to do that. :)
Thanks so much David. I’m not a programmer but familiar with html/css and a bit of php – am I reaching too much to think I can get image attachments to show as image preview within her gmail notification or are there any how to guides showing this?
This article is a tutorial for using the snippet in general. If you include the snippet and then include the merge tag for the multi-file upload field on your form in the Gravity Forms notification that you’ve configured to send the client, it should “just work.”
HI
I insert the code in my functions.php ( http://pastebin.com/r9w2beDW ) but after submitting a post by GF, its not showing in the post page. The title and body description came in the post page(single.php) but the multifile and the mark ups did not came. So what should I do? is there anything to do in the single.php page. I want to do as like your demo works.
Thanks
Are you using the correct field merge tag for the Multi-file upload field in your post content template (screenshot)?
after using that I only get the file links. it doesnot comes in the div in the mark up.
This is what I got in the screenshot. http://imgur.com/a/0xiKY
It looks like the snippet is not operating at all. Try these instructions:
https://gravitywiz.com/documentation/snippet-troubleshooting/
If that doesn’t work, we’re happy to provide additional support to Gravity Perks license-holders via our support form.
Hi David, I’m currently using GravityView to display the entry fields, your snippet is a great tool, but I found a problem: The markup is global, which means as long as I insert the merge tag into the custom content, it will display the default style which is set in snippet. But I don’t need them sometimes, for example, the multiple entry page (a list of entry showing all the entries submitted in GravityView). When I add a column in Multiple Entry Page, I want to just display the url for the file. Is there any way to selectively diaplay the same entry field in different format? URL or the default markup in snippet. I would like to pay for customization if you are not booked : ) Best regards, Edi
Hey Edi, possible but as predicted, it’ll require further customization. Unfortunately, I’m all booked up working on some new perks right now. I’d recommend Codeable until my schedule clears up. :)
hi, i am not a codder when i copy the code to function.php of my theme My site stop working I recieve Http error 500 page not working
Hi Kapil, check out our troubleshooting page. This might help: https://gravitywiz.com/documentation/snippet-troubleshooting/
Unfortunately this doesn’t work for me at all. I’ve added the code to my functions.php file but haven’t modified anything else. The created post just shows a list of links and not images or files. Also, my front page styling is all messed up. Here’s what my error log says: PHP Warning: pathinfo() expects parameter 1 to be string, array given in /home/******/public_html/wp/wp-content/plugins/gravityforms/forms_model.php on line 3074
I’ve managed to get this working, thank you very much! There’s just one thing – no lightbox or image popup plugins will work with the uploaded images. :(
Glad you were able to get this working. This code just generates the markup and does not impact frontend functionality. It is likely that the script for the lightbox is just not configured correctly to apply to these images. I would make sure that whatever selector you’re using to indicate these images for use with the lightbox is correct.
This piece of code not working, i just implemented as {File:29} where “File” is label name and 29 is the ID in my form , but links are not showing up in the pre submission confirmation page
I’ve just tested and this is working for me. I’d recommend getting Gravity Perks for the GP Preview Submission perk. If you’re still having issues, drop us a line via the support form and we’ll be happy to help.
HI David, thank you for this. But one question, what will i do if i want to apply different sizes of images per field that i use in my email notifications?
You would need to write some additional code to make this context-sensitive. Right now it will just work globally per configured field.
Hi David, I understand. May you please help oh how to display just only the last uploaded file,? so that i could set it as the displayed image on my email notif? Thank you
Hey David, excellent site & very helpful snippets – thank you!
Trying to do something similar to what this multi-file merge tag code does. My aim is to combine the contents of several GF fields submitted in a form to generate a new single querystring / url and post that result into the body of a new post (using your post body snippet).
In other words this is meant to create a simple url builder form. The data submitted also incorporates some hidden field content to generate an entire link that can be presented in a post or page. An example of the resulting url would be a facebook feed dialog, share dialog, etc.
Thinking this multi-file format may work for a standard text field, or a series of field types.
Is it possible to use this for combining several merge tags from one form into a string that’s posted into the body of the a new page/post?
Hi Jon, it’s possible but would require custom code. I’d reach out to a service like Codeable.io to get this code written.
Hi,
the code works fine. I have only one issue…
I’m using the plugin GF Post Updates (https://wordpress.org/plugins/gravity-forms-post-updates/) and if I update the form, I’m loosing all the merged data.
Is there any solution to prevent that?
Thanks, Simon
Hi Simon, I’m betting that GF Post Updates does not support the Post Content template that you’ve configured to generate the post content – or – it is not replacing the merge tags with Gravity Forms’ GFCommon::replace_variables() variables method. In either case, I’d reach out to the developer of that plugin for assistance with this one.
Hi,
unfortunately, the code doesn’t work for me. I’m using GF with custom post types and in the frontend. Is that a problem?
regards Simon
Hi Simon, there are no known conflicts between this and the GF Custom Post Types plugin. I tested the demo again to confirm this is still working. No issues there.
Hmm, is there a way to debug the form? I couldn’t find the input in the post.
Missed to add the merge tag… Everything fine. Thanks :-)
Hi David, I’ve noticed that the class “gw-image” or “gw-image-link” is not predefined in the custom markups, if I wanna use the class “gw-image” or the “gw-file” or “gw-text” class in the demo, how can I do it? Define the classes in the theme’s css? BTW, It seems that the markup templates for the pdf or text in the demo page are not included in the snippet code, could you offer me a same demo as the gwdemo page? Thanks!
Absolutely. Here’s the PHP and CSS: http://pastie.org/8663655
Thanks David! And should I paste the css to the theme’s style.css or elsewhere?
Yup, exactly. :)
Hi David! Really appreciate your quick response! And one more question: I’m currently using the “rename the uploaded files” snippet from this article: https://gravitywiz.com/rename-uploaded-files-for-gravity-form/ So does your snippet conflict with that one? Should I remove it?
P.S: I’ve purchased the GP, and I wanna translate it, is there anyway I can do that? Many thanks!
There is no known conflict. Are you experiencing an issue using both snippets? I’ve received your GP support ticket and am making a few changes to better support your request. :)
Hi David, I’ve noticed that in the image template you used a css class named “gw-image” and link style as “gw-image-link”, is that predefined in elsewhere? Or we could use it directly?
That is just a class I specified in my custom markup (see the “Specific Form w/ Custom Markup” section). You can add your own or use that same class in your own custom markup.
Hey, Absolutely great piece of code for use with Gravity Wizz! I’m using it on my site and its working well. One issue I have is that when someone uploads a .jpg file with the file extension in capitals (i.e. JPG) – the image doesn’t get picked up by the lightbox. So when the image is clicked, it goes to a new page with just the image. This doesn’t happen when the file extension is non-caps.
Is there any explanation why this is the case? Can i do anything to solve it?
Thanks.
Hm, not sure. Probably something to do with the lightbox script. You can try renaming the file with this snippet which should lowercase the extension automatically: https://gravitywiz.com/rename-uploaded-files-for-gravity-form/
Could we upload the text file and have it auto populated into a field as a place holder?
Possible but would require custom code.
Hello everything is working great when i make a new post everything works with the pictures attached.but when i post with contributor or subscriber i get only this in code : when i post with admin i get this and its showing the picture : <img src=”http://pleziertjes.be/wp-content/uploads/gravity_forms/1-172adeae47964c8d5caf048ba0b677fe/2015/12/frnak3.jpg” alt=”” width=”33%” so on the admin side everything is working but when logged in as contributor or subscriber it is only showing a broken link
It seems something is stripping our your HTML. Try a theme/plugin conflict test to determine if other 3rd party code is interfering with this snippet.
Hi David, is there a way to preview images uploaded in the all_fields table with the preview perk? Like post images look in all_fields table.
Hi JanoLima, it is possible but would require custom code. If you’re interested in commissioning this functionality, get in touch.
Hi i used the code on top of the page(show code) and everything works very nice ,but is there a way to make the images clickable ?i saw you already answered this and gave some php and css code but what do i need to replace in your code with that php field ? im not a programmer so sorry for the question
Hi Jurgen, just wrap your images in the anchor tags:
<a href=”{url}”><img src=”{url}” /><a/>
Hi David, I’m currently using the code on this page to modify the multi file merge tag and using it in my content template to populate the post body content. I am also using the “Gravity Forms Post Update” plugin (to allow users to edit posts from the frontend).
The issue I am running into: When I edit a post (from the frontend) that has a multiple files uploaded via the multi-file upload field, and save the post (without touching/deleting any of the previously uploaded images), the multi file merge tag code that you have on this page does not kick in. And so when i view the updated post, it strips away all the multi-file data from the post body. BUT the data itself is still inside the custom fields, so they’re still there. It’s just that it doesn’t get repopulated inside the post body. It’s only when I edit the post and re-upload the images again, then the post body gets the data from the multi file merge code on this page.
Have you encountered this issue before? And I apologize if this question is not supposed to be posted here since it ties in with another plugin..
Hey Alex, this is an appropriate place to ask this question. Does this plugin populate the Post Body field with the entire contents of the post or does it pull the content from the originally submitted entry?
When I edit the post using the plugin, and I make changes to the title or some other text fields, and save, the post body does get updated with the new text content.
Everything else gets updated and re-inserted into the post body via the content template. But not the multi-file upload field, whatever was in the post body before gets stripped away.
Sorry if im repeating myself here lol
Hi Alex, I believe understand the issue. I’m trying to figure out how it might be occurring. What I’m asking is does the multi-file upload markup that exists in the post content even get loaded into the field for editing the post content?
No the markup does not get loaded back into the post after editing + saving the post.
So for example in the content template i’ve got the following:
{step 1 images}
When originally submitting the post the first time, the end result works perfectly like so:
After editing the post, the
tag with nothing inside.
But when i look inside the actual custom field inside the post, the URL of the file is still there.
Sorry, I just noticed my html is not showing correctly in my previous reply. Here’s my reply again (excuse the weird html syntax):
No the markup does not get loaded back into the post after editing + saving the post.
So for example in the content template i’ve got the following:
{step 1 images} When originally submitting the post the first time, the end result works perfectly like so:
{image1}{image2}{image3}
After editing the post, the li image data gets deleted, leaving only the ul tag with nothing inside.
But when i look inside the actual custom field inside the post, the URL of the file is still there.
Sorry, one more time, I’m trying to show you the markup code:
No the markup does not get loaded back into the post after editing + saving the post.
So for example in the content template i’ve got the following:
-UL- {step 1 images} -/UL- When originally submitting the post the first time, the end result works perfectly like so:
-UL- -li-{image1}-/li- -li-{image2}-/li- -li-{image3}-/li- –/UL–
After editing the post, the li image data gets deleted, leaving only the ul tag with nothing inside.
But when i look inside the actual custom field inside the post, the URL of the file is still there.