When Trix Image / Attachment does not upload to Amazon S3

An app was all set and done and I had to test it, we had a commenting system and a rich text commenting was needed and hence we went for Trix editor which integrates well with Ruby on Rails. A problem arose, when we used local storage the image uploads worked, but when we used Amazon S3 it did not.

It turns out that Trix uploads images directly to storage, and let’s say if you are uploading from say http://localhost:3000, you must whitelist it in Amzon S3 bucket. So we did.

So go to your S3 console, you will have a tab call Permission, click it and scroll down, and this thing called Cross-origin resource sharing (CORS) would appear

Add the text below in it and save.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]

If you are using some other domain like https://abc.ocm, then it should be added instead of http://localhost:3000. Now add your image in Trix, it should sit upload to S3 bucket like charm.