Rails 6 Action Text Amazon S3 Images and Attachments not Uploading

ruby on rails web development software development

So we've finally taken the plunge and carried out our first Action Text implementation. It was used to power a blog.

But we ran into an issue.

Problem

Here are the symptoms

  • We were on Rails 6
  • We had Active Storage setup
  • We had Action Text setup
  • On development, we used 'file' for Active Storage and it worked perfectly
  • On production, we used 'S3' for Active Storage and it didn't work
  • We tried switching to 'S3' for development to debug and it still didn't work

What was weird, is we were seeing things like this messages like S3 URL generated complete with an AWS Key, but when we went to browse the Amazon S3 bucket, there was nothing.

There was also something weird happening with the rich text editor. When we selected an image - we would see this gray bar across the image (that should have been the clue:)).

Solution

After days of trying to figure out what was going on, we stumbled upon this post which had our solution: https://stackoverflow.com/questions/63998547/rails-action-text-no-upload-after-switching-to-amazon-active-storage.

So as it turns out, Action Text and the Trix Rich Text Editor use client-side direct uploads. If you're not familiar with this, basically the file gets uploaded directly from the browser to the Amazon S3 without going through your Rails server. When you do a web request from a browser to another site, in this case from the user's browser to Amazon S3, you have to set up CORS rules!

So the answer, is you have to set up some CORS rules like this:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "https://www.example.com"
        ],
        "ExposeHeaders": []
    }
]

Ensure you actually fill out the Allowed Origins to match your actual website. If you're doing dev testing on your machine, you can put http://localhost:3000.

By the way, if you're wondering what that gray bar was all about? That was the progress bar for directly uploading to Amazon S3. It stayed there because the web app didn't have the CORS permissions to write to Amazon S3.

Thoughts

Unless I missed something - which is very possible - I think the main issue here is the documentation for Action Text. Active Storage can be set up in multiple ways. For example, you can set up Active Storage WITHOUT direct uploads and it'll work fine. However, to use Action Text, you HAVE to set up direct uploads. At the time of the writing of this article, this is all they have "Also, you need to set up Active Storage for embedded images and other attachments. Please refer to the Active Storage Overview guide." What they probably should say is that if you're embedding images or other attachments, be sure to setup "direct uploads", which subsequently tells you how to setup CORS.

Alright, hope that helps out some peeps!

Casey Li
CEO & Founder, BiteSite