I have recently added rich-text features to my blog on my portfolio website, most of which works fine (I followed a GoRails tutorial, as was lazy).

The issue I am facing is that image uploads work in development, and not in production.

I am using an S3 bucket as detailed on the Active-storage rails guide, hosting said production portfolio via Heroku. I have reason to suspect a CORS error but I can't seem to fix it. The reason I suspect this is because the same error happen in development, until I ammended the CORS Permissions. However, I could most-definetly be wrong as I am very new to Rails (7).

Below is as much detail as I can think to add, detailing the problem.

S3 CORS Permissions :

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT"
        ],
        "AllowedOrigins": [
            "http://127.0.0.1:3000",
            "http://localhost:3000",
            "https://jpgiodevelopments.com",
            "https://www.jpgiodevelopments.com",
            "https://my-rorportfolio.herokuapp.com"
        ],
        "ExposeHeaders": [
            "Origin",
            "Content-Type",
            "Content-MD5",
            "Content-Disposition"
        ],
        "MaxAgeSeconds": 3600
    }
]

Storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

# Use bin/rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
amazon:
   service: S3
   access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
   secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
   region: eu-north-1
   bucket: rorportbucket
   public: true

HEROKU LOGS (V LONG)

[

WEB PAGE ERROR

Rest assured also, that I have included the following within production.rb & development.rb:

config.active_storage.service = :amazon

What I have tried...

1. As per the same issue within the development environment, I toiled with the CORS Permissions within my S3 Bucket. This, unlike the development environment, didn't seem to work and I cross-checked against the origins found within the headers of my production portfolio. I am not 100% certain with this however, as CORS is totally new to me (as is web-dev really : / )

I expected: For the active-storage direct upload to work, view it on my S3 bucket and for my blog app to have an upload stored within a blog post. This unfortunately didn't happen, like it did with the development environment.

2. Having looked it up, I made sure to add all dependencies to my Heroku app as I could. I figured since it raised a blob error and vips was a past issue with dependancy, I'd cover all (known) bases and install all I could think to. This included running the following;

Rails db:migrate
Rails active_storage:install

As well as install vips via Aptfile build packs as such;

libglib2.0-0
libglib2.0-dev
libpoppler-glib8

and adding it to both production and development environments via

Rails.application.config.active_storage.variant_processor = :vips

I expected: For the active-storage direct upload to work, view it on my S3 bucket and for my blog app to have an upload stored within a blog post as a result of blog-creation being fixed. Despite validated install of Vips, nothing happened whatsoever haha!

The fix was found! It was the usage of credentials.dig with correctly-typed keys & a new well-setup s3 bucket. I moved to using Heroku ENV config vars. The config vars didn't work as they where taken too literal as the access_key_id = ENV['EXAMPLE_KEY_ID'] rather than 'access_key_id = example actual key'. I switched to credentials.dig and retyped everything, including setting up and new bucket, and hey presto! Turns out It was just silly CORS set-up haha!