Rails 7 - rich text not showing attached media content

Question

I'm working on a Rails 7 app in which I use ActionText/Trix editor. I'm using Amazon AWS / S3 for storing files. I have verified and can see that media files gets uploaded to S3, but for some reason they don't gets shown (neither in the editor when trying to edit the content or when I want to present it). I'm using S3 for normal image / media uploads, and the images gets shown properly in those other cases.

My configuration looks like this:

# storage.yml
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: <app name>-<%= Rails.env %>

# credentials.yml
aws:
  access_key_id: xxx
  secret_access_key: xxx

Texts gets shown properly, It's only media files that doesn't get displayed (neither in development or in production).

My _blob.html.erb file looks like this:

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file"   %> attachment--<%= blob.filename.extension %>">
  <% if blob.image? %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
  <% end %>

  <% if blob.video? %>
    <%= video_tag url_for(blob.attachable),
    preload: "auto",
    ... %>
  <% end %>

  <% if blob.audio? %>
    <%= audio_tag url_for(blob.attachable), controls: "controls" %>
  <% end %>

  <figcaption class="attachment__caption">
    <% if caption = blob.try(:caption) %>
      <%= caption %>
    <% end %>
  </figcaption>
</figure>

After uploading a media file in the Trix editor it doesn't gets displayed:

Renders the form element like this:

<%= rich_content_form.rich_text_area :content %>
<%= rich_content_form.hidden_field :id if rich_content_form.object.persisted? %>

Have this in my model:

has_rich_text :content

Any ideas or tips on why my media files isn't getting shown?

Update

Looking in my browser console I get the following errors:

[Error] Failed to load resource: Origin http://localhost:3000   is not allowed by Access-Control-Allow-Origin. Status code: 200   (bo2qo7q0diw0juxl9v85y63nv771, line 0)

[Error] XMLHttpRequest cannot load https://<bucket-name>.s3.eu-north- 1.amazonaws.com/bo2qo7q0diw0juxl9v85y63nv771?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T103209Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=a0f1b1cc9be7cf2a4618095379fda05bde5418707c280ca2473cad604 6d6a671 due to access control checks.

[Error] Error: Direct upload failed: Error storing "grooveland-  designs-8kkTIumkHxU-unsplash.jpg". Status: 0
nrWrapper (860.03a8b7a5-1.236.0.min.js:1:6259)

Update 2 - Chrome

The above console logs was from Safari, in Chrome I get the following:

edit:1 Access to XMLHttpRequest at 'https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f' from origin 'http://localhost:3000' has been blocked by  CORS policy: Response to preflight request doesn't pass access  control check: No 'Access-Control-Allow-Origin' header is present  on the requested resource.
 
860.03a8b7a5-1.236.0.min.js:1 Uncaught Error: Direct upload  failed: Error storing "grooveland-designs-8kkTIumkHxU- unsplash.jpg". Status: 0
at AttachmentUpload.directUploadDidComplete (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849:13)
at BlobUpload.callback (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624:17)
at BlobUpload.requestDidError (actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597:12)
at XMLHttpRequest.<anonymous> (actiontext-28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js:582:57)
at XMLHttpRequest.nrWrapper (860.03a8b7a5- 1.236.0.min.js:1:6208)

directUploadDidComplete @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :849
(anonymous) @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :624
requestDidError @ actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :597

[...]

actiontext- 28c61f5197c204db043317a8f8826a87ab31495b741f854d307ca36122deefce.js :586     PUT https://<bucket-name>.s3.eu-north- 1.amazonaws.com/qkqx3qd8gq9a4uogojg8dvh3vyvu?X-Amz-Algorithm=AWS4- HMAC-SHA256&X-Amz-Credential=AKIAUP7MDHHNOBYGZXSA%2F20230731%2Feu- north-1%2Fs3%2Faws4_request&X-Amz-Date=20230731T104633Z&X-Amz- Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent- md5%3Bcontent-type%3Bhost&X-Amz- Signature=5c68bee1732d950470c0fccc203a5f8d3895bd7122f3e4667ca82ee63 210242f net::ERR_FAILED

Answer 1

As I initially commented, you need first to make sure that your CORS configuration for your S3 bucket allows the needed access for the files.

A misconfiguration could prevent the files from being displayed in your app, even though they have been correctly uploaded to S3.

See S3 / Configuring cross-origin resource sharing (CORS)

The OP's configuration was required because the application (running on "https://<domain>" and "https://www.<domain>") needed to perform GET, POST, PUT, DELETE, and HEAD requests on the resources stored in your S3 bucket.

The "*" in "AllowedHeaders" allows all types of metadata to be sent with your requests, which is generally fine unless you need to restrict this for some reason.

Answer 2

The issue was related to CORS configuration as mentioned in the comments. Found a working configuration here:

[
{
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "HEAD",
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],
    "AllowedOrigins": [
        "https://<domain>",
        "https://www.<domain>"
    ],
    "ExposeHeaders": []
}
]

https://stackoverflow.com/a/76244924/756148