Amazon S3

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.

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.

Create IAM User

If you already have access key id and secret access key, skip this step.

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.

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": "*"
        }
    ]
}

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
Update the Object Ownership on your bucket to be Object Writer.
Click Save

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

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://*.unlayer.com"
        ],
        "ExposeHeaders": []
    }
]

<?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>

Add Credentials in your Unlayer Project

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

Login to Unlayer dashboard
Select your Project
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

Test your File Storage

Click the Test Storage button and see if all the items are working properly. If any of these are red, the storage will not work. In that case, please make sure all permissions are properly attached and the bucket exists in the correct region.

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

Connect 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 your Project
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/
Optionally, you can also add a path prefix if the URL path also changes

That's it. You are all set 😀

Troubleshooting

If your files are not being uploaded to your S3 bucket correctly, check these:

Make sure the storage is marked as Primary.
You must pass projectId when initializing the editor.

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

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