Action Text Attachments With Rails 6 and Amazon S3 in Production

I figured I would make a quick tutorial on this as I searched high and low for days to find a solution. If you're like me, you love the Trix (Action Text) editor for Rails. It's convenient, clean looking, and most importantly functional. It seems to have everything you need and nothing that you don't.

So you get it up and running on your development environment with ease and then go to push to production. You think you have all your Amazon S3 settings correct but it's a no go when you try to attach, say, an image in your post or article. You get that ugly line through the middle of your pic telling you, this ain't working!

So here's the fix that will likely correct your issue - provided everything else is working with your Active Storage settings linking to your Amazon S3 Bucket. You need to add to cross-domain resource sharing - also known as *CORS *(Cross-Origin Resource Sharing).

It's pretty simple to do.

• Sign into your Amazon S3 Console.
• Select the Bucket name for which you are editing your CORS declaration.
• Selection Permissions - as seen in the image below.

• Then select CORS configuration.

• Then add the following xml in the CORS configuration editor. Replace with your URL in the AllowedOrigin attribute.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://yourdomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://yourdomain.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>![Uploading file...]()

Make sure you save it. Then head back over to your application in production and give your editor a try. You should be all good to go.