Skip to content

Building Gravity Form to Upload to AWS S3 for use with S3 Bucket Browser Plugin

Posted in Plugin Development, Plugin Guides, and WP Plugins

This tutorial will guide you into building your own upload form to add objects to a bucket in AWS S3. This is designed specifically for (and requires) the following plugins:

This tutorial assumes that you have already installed, and configured AWS S3 Bucket Browser (set your secret and access key, as well as your region, and have already created the bucket with the appropriate CORS values).

Step 1: Create the Gravity Form

First, create a new Gravity Form. You will want to create two fields:

  1. A file upload field. This will be the file uploaded to the AWS bucket.
  2. A text field. This will be used to enter the folder that the user wants to add the folder to.

Note the form number, and the field ID numbers. You may also wish, depending on your use case, to go to “Form Settings > Restrictions”, and require the user to be logged in to use. You can always modify this script later to restrict it even more, if you wish.

file-upload-to-s3-browser

 

Step 2: Create an Add-On Plugin

This step assumes familiarity with basic plugin structure. You will first need to create a folder your-plugin-name, in /wp-content/plugins/ , and then a file inside called your-plugin-name.php. 

To see the code associated with any of the steps listed below, simply scroll down to see the full code.

Step 1 (Lines 1-10): Start with your opening php tag, and your header information. Feel free to modify any of the header information listed here.

Step 2 (Lines 12-14): Tell your plugin to use the AWS S3 PHP SDK files (which were located in the AWS S3 Bucket Browser plugin you installed and configured first).

Step 3 (Lines 18-20): Define your form options. Change these values to match YOUR form (form number, and the id of the upload field).

Step 4 (Lines 21-23): Add your action to trigger after the specified form is submitted, and define the function that it will call. Declare your function on line 23.

Step 5 (Lines 24-32): Add some error handling that checks to make sure a file was actually uploaded. If it was, populate the rest of our variables. The access key, secret key, and region are all pulled from the settings in the AWS S3 Bucket Browser plugin. The bucket name must be specified manually here on line 31.

Step 6 (Line 34): Make sure the second parameter in rgar is set to the field id for your textbox. This gets the folder you want to upload to.

Step 7 (Lines 36-57): This is just all of the file handling, using the S3 SDK. The file name (plus folder if specified) is set as the key, and then the file is pushed live.

The contents of your-plugin-name.php should be as follows:

<?php

/**
* Plugin Name: S3 Uploader for Gravity Forms
* Plugin URI: https://www.wptechguides.com
* Description: A plugin for Gravity Forms and AWS S3 to allow file uploads
* Version: 1.0
* Author: duplaja (Dan D.)
* Author URI: https://www.convexcode.com
**/

use Aws\S3\S3Client;
use Aws\Credentials\Credentials;
use Aws\S3\Exception\S3Exception;



//* Form constants
define( 'FORM_ID', 7 );
define( 'FILE_UPLOAD_FIELD_ID', 1 );
//* Upload the file after form is submitted (Product Edit)
add_action( 'gform_after_submission_' . FORM_ID, 'gf_submit_to_s3', 10, 2 );
function gf_submit_to_s3( $entry, $form ) {
	// Bail if there is no file uploaded to the form
	if ( empty( $entry[FILE_UPLOAD_FIELD_ID] ) )
		return;
	// Instantiate the S3 class
	$aws_access_key = esc_attr( get_option('s3_browse_aws_access_key') );
	$aws_secret = esc_attr( get_option('s3_browse_aws_secret') );
	$aws_region = esc_attr( get_option('s3_browse_aws_region') );
	$aws_bucket = 'your_bucket_name';
	$credentials = new Credentials("$aws_access_key", "$aws_secret");

	$folder=rgar( $entry, '2');

	//Instantiate the S3 client with your AWS credentials
	 $s3Client = S3Client::factory(array(
		'credentials' => $credentials,
		'region' => "$aws_region",
		'version' => 'latest' ));

	// Get the URL of the uploaded file
	$file_url = $entry[FILE_UPLOAD_FIELD_ID];
	// Retreive post variables
	$file_name = $_FILES['input_' . FILE_UPLOAD_FIELD_ID]['name'];
	
	$url_parts = parse_url( $file_url );
	// Full path to the file
	$full_path = $_SERVER['DOCUMENT_ROOT'] . $url_parts['path'];
	if ($folder != '') {
		$file_name = $folder.'/'.$file_name;
	}
	$s3Client->putObject(array(
	    'Bucket'       => $aws_bucket,
	    'Key'          => $file_name,
	    'SourceFile'   => $full_path,
	));

}

Wrap Up

That’s it! Just activate your plugin, and away you go! One use I’ve found is to add the form to the same page as the file browser shortcode, below. Then set the form to be only visible to logged in users, and the display message to something to the effect of: “You must be logged in to upload files.”.

Questions? Cool modifications? We’d love to hear from you! Either shoot us a message, or leave a comment here.