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 46+ essential add-ons for Gravity Forms with support you can count on.
Hi I need to know how many files uploaded on file upload pro element at any order and use file count number on perks calculation addon how can do it ?
We don’t have a ready solution for counting the number of files uploaded. If you’re a Gravity Perks customer, drop us a line and we’ll look into whether we can add support for it.
If you use the index[0] attribute, when used in a view it will only show the first image. Works as intended, but then there is no way to show the other images. This code is currently limited to a single instance of a form field that may contain many files, but there is no way to call different attributes for the same field id. Correct? Any possibility of adding this feature?
Hi Jonathan,
From what I understand this is currently unsupported. If you have an active Gravity Perks license, you can send us a message via our support so we can take a closer look at your use case.
Best,
Would this be able to impact the gravity forms individual entry display? So the attachment links are instead displayed in viewer?
Hi Heather,
This will work for merge tags used on Notifications and Confirmations.
If you have an active Gravity Perks License, you can get in touch with us via our support form so can dig into this feature.
Best,
Can this code show clickable image thumbnails? I’m a code newbie and don’t know how to do that myself. :)
Hi Angela,
Default merge tag should display a clickable link, yes.
If you’re a Gravity Perks customer additional customization, we’ll be happy to provide additional support for this snippet via the support form.
I’m trying to make this work with PDF files, as in the demo. The demo snippet doesn’t seem to have the PDF code – I see you’ve linked it in a few other comments, but the link looks to have expired. Is that code still available anywhere? Thanks!
Hi Noel,
Here’s the configuration we’re using for the demo, which includes a PDF and TXT config.
https://snippi.com/s/9lqo8vh
Hello!
Such cool code. I have been looking for a way to do this for a long time. I have one question though –
Is there any way to have it use the Gravity Perks “Gravity Forms Media Library” to have the media upload directly to the media library and not to the gravity forms uploads area?
Thank you!
Hi David, If I have multiple forms and different field to configure, how should I configure the code?
Hi Edi, this will help: https://gravitywiz.com/documentation/apply-class-based-snippet-different-forms/
Hey David,
Big thanks for this snippet! Our team has taken it one step further to display all of the uploaded photos in a Slick Slider, works like a charm. The only caveat is that any portrait-oriented photos that are uploaded get flipped 90 degrees to be displayed in landscape orientation. Here’s an example using your demo: https://demos.gravitywiz.com/my-post-title-530/, you can see this happening to ‘1_Peak_Portrait’ and ‘2_Keyhole’. I am obviously experiencing the same issue when creating test posts on our site. I’ve confirmed that it’s not coming from camera settings, I’ve tested with photos from a DLSR and iPhone photos, no difference. What is really interesting is that even if I go into the Media Library where these photos get saved (I have the multi-file upload field set to save uploads to the Media Library) and flip them back to portrait and save them, they still display landscape in the post, and I have confirmed that this isn’t a caching issue. Any suggestions?
Thanks for your time!
David,
We’ve figured out why altering the image in Media Library and saving provides no results, because WordPress creates an entirely new URL for edited images, which would then need to be updated in the post editor… Still looking for ideas on why portrait photos get uploaded sideways in landscape orientation in the first place, I’m 99% sure it’s not coming from EXIF settings. Thanks!
Hey BCI Media, I’m not sure on this one. This snippet doesn’t actually handling uploading the images; Gravity Forms does that. I’d ping the GF support team and see if they have a solution for this. :)
David, first off thank you for this snippet as well as the wonderful support you have provided within these comments. I’m wondering how I could go about combining the multiple files uploaded by the user into a single archive. I understand if this is too much customization to get into here, but hoping you might have a direction to point me in, to get started. Thank you!
Hi Hosea, we actually have a snippet that will do this.
https://gist.github.com/spivurno/4ef44d4d4bd62faf94ae
If you’re a Gravity Perks customer, we’ll be happy to provide additional support for this snippet via the support form.
What about these extensions? array(“PDF”, “DOC”, “ZIP”, “RAR”)
I will just like to add that I’m trying to allow someone to use the Gravity Form to upload zip, rar, 7z and it shows on the post same as the images do. Therefore, if you’re a visitor you and not a user submitting content you can easily download the content via post.
Hi Will, this snippet is designed as a starting point and does not cover every file type. See the “Specific Form w/ Custom Markup” example for how you can add your own markup for different file types.