Our customers have requested it many times. Today, we are excited to introduce a new feature to SyncS3 we think you’re gonna love! “Direct to S3” sends your file uploads (submitted via Gravity Forms) directly to your S3 bucket without ever hitting your server. This allows you to bypass your server’s limitations, such as file sizes or timeouts. Now you can upload 2GB video files without any complaints from your server! This new feature is available in SyncS3 version 1.6.0.
Why Would You Need Direct to S3?
Primarily due to server limitations. For example, we have plenty of customers who host their websites on WPEngine. However, given WPEngine’s limitations on file uploads, uploading things like large video files can be very difficult. SyncS3 steps in with Direct to S3 to completely bypass WPEngine’s servers to upload these kinds of files to your S3 buckets.
Aside from getting around server limitations, the Direct to S3 feature also improves the user experience of your form by providing a snappier upload process. It includes a progress bar to let users know how far their uploads have made it, and can upload files while the user finishes the rest of the form.
Getting Started with Direct to S3
The “Direct to S3” feature is contained within a new field. This field can be added to your forms like normal in the Gravity Forms form editor.
The new uploader uses special S3 settings and configurations to upload files directly from the browser to your S3 bucket. To ensure a proper setup, first follow these steps:
1. Make sure you have created your bucket. Note your bucket’s region, as you will need it in the next step.
2. In the Amazon Cognito console, create an Amazon Cognito identity pool using Federated Identities with access enabled for unauthenticated users. This Identity must be in the same Region as your S3 bucket, so be sure to select the correct region. You need to include the identity pool ID in the code to obtain credentials for the browser script, so copy it to your clipboard.
3. In the IAM console, find the IAM role created by Amazon Cognito for unauthenticated users. Add the following policy to grant read and write permissions to your S3 bucket (replace BUCKET_NAME with your bucket’s slug).
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:DeleteObject",
"s3:GetObject",
"s3:ListBucket",
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": [
"arn:aws:s3:::BUCKET_NAME",
"arn:aws:s3:::BUCKET_NAME/*"
]
}
]
}
4. In your bucket’s Permissions settings, add the following CORS policy to allow uploads from the browser:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*" // You can replace this with your domain to restrict uploads to only those originating from your website.
],
"ExposeHeaders": [
"ETag"
]
}
]After you’ve configured everything in your AWS account, come back to your field settings and insert your Identity Pool ID. You can also set the maximum number of files for the field, and the accepted file types (e.g. .pdf).
Finally, select the upload action. This tells SyncS3 when to upload the files. You can choose between File Select or Form Submit. File Select uploads files as soon as the user selects them. This is perceivably faster because the upload occurs right away, and the user can finish the rest of the form while the upload completes. However, it can result in uploaded files for incomplete submissions.
The Form Submit option uploads files when the user submits the form. Since the user has completed the form at this point, they’ll have to wait while the files are uploaded. This seems like a slower process for the end user, but it ensures you’re not hosting files for incomplete submissions.
Limitations
The “Direct to S3” feature does its business asynchronously, so files are uploaded before an entry is created. If you’re using SyncS3 filters to customize a file’s path, these filters won’t work with the “Direct to S3” uploader because the upload doesn’t occur through your server. As a result, you’ll need to rely on some custom Javascript and user input to customize the file path. Here’s a snippet you can use to get started:
add_action( 'wp_head', 'add_custom_setS3Path_js', 99 );
/**
* Add a custom Javascript function to create the file path in your S3 bucket.
* This function will need adjusted to fit your requirements and naming conventions.
*/
function add_custom_setS3Path_js() {
?>
<script>
var setS3Path = function(file, formId) {
var input1 = document.getElementById("input_" + formId + "_1").value;
if ( "" != input1 ) {
input1 += "/";
}
var path = input1 + file.name;
return path;
}
</script>
<?php
}
add_filter( 'syncs3_ajax_uploader_object_path_js', 'function_name', 10, 3 );
/**
* Runs the custom Javascript function to determine a file path.
* Default value is "file.name". This will use the file name, and insert it in the root of your bucket.
*
* @param string $js Custom Javascript
* @param object $field SyncS3_AJAX_Uploader object
* @param array $form Form data
*
* @return string
*/
function function_name( $path_js, $field, $form ) {
$path_js = "setS3Path(file, {$form['id']})";
return $path_js;
}