Serverless File Uploads for Gravity Forms

This tutorial covers building Gravity Forms able to receive user-generated content via Uploadcare. In case you are running a WordPress powered website, you might also want to check out our WP integration tutorial.

Integrating with Uploadcare also ensures you need no storage for user media. Every uploaded media is delivered via smart Uploadcare CDN, providing improved load times for your system and saving bandwidth.

Gravity Forms can be highly customized. One of the ways to do that is by using “filters.” WordPress defines filters as special functions allowing plugins to modify various types of internal data.

Let’s build an example form for submitting travel expenses.

Before we begin

Before proceeding with the integration, let’s make sure everything is in place:

  1. Gravity Forms account.
  2. Uploadcare account.
  3. Uploadcare free API keys.

Once you create an Uploadcare account, navigate to your Dashboard to create a new project or discover API keys for an existing one. You will need a public key: it defines a target project user uploads will go to.

If you plan uploading non-image content, add billing info to your account.

Step 1: Add scripts with Uploading Widget

Locate the header.php file under a root directory of your WordPress theme and place the following line in its <head> section:

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="GravityForms"></script>html

Step 2: Add a field button to your admin interface

Use the code below to add a field. Put it in functions.php. The file is usually located under your WordPress theme directory, e.g., /var/www/wordpress/wp-content/themes/twentyfifteen/functions.php.

add_filter('gform_add_field_buttons', 'ih_gform_add_field_buttons');
function ih_gform_add_field_buttons($field_groups) {
  foreach ($field_groups as &$group) {
    if ($group['name'] == 'advanced_fields') {
      $group['fields'][] = array(
        'class' => 'button',
        'value' => __('Uploadcare', 'gravityforms'),
        'data-type' => 'uploadcare'
       );
      break;
    }
  };
  return $field_groups;
}php

Step 3: Add form settings to the Uploadcare field

Use the code below to inject settings attributes into Uploading Widget fields. Feel free to use multiple settings if needed. This allows you to control Uploading Widget labels, descriptions, layouts, and validation settings via the Gravity Forms admin interface.

add_action('gform_editor_js', 'editor_script', 10, 5);
function editor_script(){
?>
<script>
  fieldSettings['uploadcare'] = '.label_setting, .description_setting, .admin_label_setting, .size_setting, .default_value_textarea_setting, .error_message_setting, .css_class_setting, .visibility_setting'
</script>
<?php
}
add_filter('gform_admin_pre_render', 'ih_gform_admin_pre_render');
function ih_gform_admin_pre_render($form) {
  foreach ($form['fields'] as $i => $field) {
    if ($field['type'] == 'uploadcare') {
      $form['fields'][$i]['displayAllCategories'] = true;
      $form['fields'][$i]['adminLabel'] = 'Receipts';
      $form['fields'][$i]['adminOnly'] = false;
    }
   }
  return $form;
}php

We’ve just changed our field lable to “Receipts”. That is to hint users at the type of content to upload.

Step 4: Adding Uploadcare Uploading Widget to your form

That step is about actually adding the Uploading Widget to the from we’ve been building. For the custom receipt field, we’ll be using gform_field_input. And here’s how:

add_action('gform_field_input', 'ih_gform_field_input', 10, 5);
function ih_gform_field_input($input, $field, $value, $lead_id, $form_id) {
  if ($field['type'] == 'uploadcare') {
    $input = sprintf(
      '<p><input type="hidden" name="input_%s" role="uploadcare-uploader" id="%s" class="gform_uploadcare" data-multiple data-images-only value="" /></p>',
      $field['id'],
      'uploadcare-'.$field['id']
    );
  }
  return $input;
}php

$input can be modified to hold any number of local Uploading Widget options.

The data-images-only sits in the Uploading Widget config to provide a fail-safe experience when working with accounts on the Free plan with no billing info added: those only allow image uploads. See more about the images-only option.

In the example above, data-images-only is used to allow image file uploading only, and data-multiple to let users send many files in one go.

Next, locate your Gravity Toolbox, switch to “Advanced Fields,” and click “Uploadcare” as shown in the picture.

You should now be able to see the Uploadcare button in your Gravity Forms toolbox.

Admin page:

.

Public page:

The guide does not cover adding simple date and text fields to the form: those are intuitive.

Step 5: Uploadcare Uploading Widget custom styling (Optional)

This step is optional and covers changing the Uploading Widget's button caption and styling.

For instance, you want a black button.

Create a file called uploadcare-style.css and put the following code in there:

.uploader-dark-button .uploadcare-widget-button-open {
    background-color: #333333;
    border-radius: 0;
}
.uploader-dark-button .uploadcare-widget-button-open:hover {
    background-color: #333333;
}css

Put the file in your base directory, e.g. wp-content/plugins/gravityforms/css/uploadcare-style.css.

Next, inject the stylesheet into your page. Gravity Forms renders custom scripts through gform_enqueue_scripts. So, the next step is about adding the snippet provided below to functions.php. Please, refer to Steps 2-4 for details.

add_action('gform_enqueue_scripts', 'enqueue_custom_script');
function enqueue_custom_script() {
  wp_enqueue_style('gforms_uploadcare_css', GFCommon::get_base_url().'/css/uploadcare-style.css');
}php

Finally, choose the Uploadcare field and go to the “Appearance” tab to locate another field named “Custom CSS class.” Enter uploader-dark-button and click “Update.”

Gravity Forms is able to pick up and apply styles to your Uploading Widget automatically. For more ideas on styles, you can check out the Uploading jQuery Widget docs.

Conclusion

We have just allowed users to add media to a form by integrating jQuery widget into Gravity Forms. It took four simple steps and will just work.