We have file storage support built-in with Amazon S3 that can be configured without any coding. Follow these steps to set up your S3 file storage.

1) Create S3 Bucket

If you already have a S3 bucket, skip this step.

The first step is to create a bucket in your AWS S3 console. You need to uncheck "'Block all public access" for S3 storage.

2) Create IAM User

Next, go to your AWS IAM console and create a new user with Programmatic Access so you can get the access key id and secret access key.

3) Attach Policy and Permissions

If possible, attach the AmazonS3FullAccess policy to the user. However, if you want to give a minimum set of permissions, use the following policy:

Make sure to replace BUCKET-NAME with your actual bucket name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetBucketPublicAccessBlock",
                "s3:PutObject",
                "s3:GetObject",
                "s3:PutBucketPublicAccessBlock",
                "s3:GetBucketCORS",
                "s3:ListBucket",
                "s3:PutBucketCORS",
                "s3:GetBucketAcl",
                "s3:GetBucketLocation",
                "s3:PutObjectAcl",
                "s3:PutBucketTagging"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET-NAME/*",
                "arn:aws:s3:::BUCKET-NAME"
            ]
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": "s3:ListAllMyBuckets",
            "Resource": "*"
        }
    ]
}

5) Confirm Public Access is Not Blocked

Your S3 Bucket must have public access enabled so users can access the uploaded images.

Go to S3 in AWS Console
Select your S3 Bucket
Click Edit public access settings
Uncheck Block all public access if it's checked
Click Save

5) Enable CORS for your S3 Bucket

Your S3 Bucket must have CORS (cross-origin resource sharing) enabled. Follow these steps:

Go to your S3 Bucket in AWS Console
Click the Permissions tab
Click the CORS Configuration button
Add the following in the configuration editor

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://*.unlayer.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

4) Add IAM Credentials in your Unlayer Project

Simply enter your information of S3 storage against your project. For this:

Login to Unlayer dashboard
Select relevant project name from the dropdown (next to Unlayer Icon)
Click Settings in the navigation bar and select the Storage tab
Click the Add Storage button
Enter your Access Key Id, Secret Access Key, and Bucket
Check Primary Storage at the end

5) Test your File Storage

Click the Test Storage button and see if all the five items are working properly. If any of these are RED, the storage will not work. In that case, please follow the below guidelines.

In some cases, we attempt to fix certain permissions so you can try clicking Test Storage multiple times.

If any of the tests fail, here is a brief description on the errors:

Valid Access Key and Secret
Try Cyberduck and see if the access key and secret are correct. You should be able to access your S3 bucket with the access key and secret access key.
S3 Bucket Exists
The S3 Bucket with the same name must exist in your AWS account.
Valid Region on Bucket
S3 Bucket's region in your project settings must match the region you have selected in AWS.
Valid Configuration on Bucket
Make sure the policy includes correct permissions
Testing Image Upload
Make sure the policy includes correct permissions
Checking Public Access on Uploaded Image
Make sure the policy includes correct permissions
CORS Access Enabled
Make sure your S3 bucket has CORS enabled

6) Connecting your CDN (optional)

You can connect your CDN (content delivery network) such as Cloudfront (or any other) with your storage. It will add caching and load images faster.

Note: Your CDN must be set up to access your S3 Bucket.

Login to Unlayer dashboard
Select relevant project name from the dropdown (next to Unlayer Icon)
Click Settings in the navigation bar and select the Storage tab
Choose your connected storage
In URL Prefix, add the root URL to your CDN such as https://cdn.mydomain.com/

That's it. You are all set 😀

Troubleshooting

My editor does not use my S3 storage?

1. Make sure the storage is marked as Primary.

2. You must pass projectId when initializing the editor.

<script type="text/javascript">
unlayer.init({
  id: "editor",
  projectId: XXXX // Add your projectId from Settings
});
</script>

3. Make sure the domain you are running the editor on is added under Allowed Domains in your project settings > Embed.

How can I integrate my Amazon S3 storage?