Customizing the Multi-File Merge Tag

A simple way to create custom templates for displaying files uploaded via a Multi-File Upload field. Image files can be displayed as images, video files can be loaded as playable videos, PDFs (and other text file types) can be stylized to indicate the file type. The possibilities are endless.

Gravity 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.

This 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.

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. “Tuplips8.jpg”).

{ext} The extension of the file (i.e. “jpg”)

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!

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: http://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?

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!

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!

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.