Action text (Trix) : cannot add images in rich text on Rails (“attach files” not saved)

Question

I am adding a blog to my Rails 6.0 website.

I have installed Action Text and linked Active Storage to Cloudinary

Then I created a Article model which has a photo.

class Article < ApplicationRecord   
  has_one_attached :photo
  has_rich_text :rich_body
  validates :title, uniqueness: true
  validates :lead, presence: true
  validates :rich_body, presence: true 
end

On Articles/new.html.erb I to added the Trix WYSIWYG editor for "rich_body".

<div class="container">
  <%= simple_form_for(@article) do |f| %>
    <div class="form-inputs">
      <%= f.input :title %>
      <%= f.input :lead %>
      <%= f.input :photo, as: :file %>
      <%= f.input :caption %>
    </div>
    <div class="form-inputs">
      <%= f.rich_text_area :rich_body %>
    </div>
    <div class="form-actions">
      <%= f.button :submit, class: "btn btn-primary" %>
    </div>
  <% end %>
</div>

I managed to create blog articles in which the image was uploaded through the "Photo" field.

Now I want to add images within the rich_body. I looked at this article to do so. I attach them with the "Attach Files" ( see screenshot of thsi button ). It is displayed in the editor ( see screenshot )

When I hit save, the article is created. But only the text of the "rich_body" remains. There is no attached image. If I look at "params", there is no trace of the image.

=> <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"DDGTxfT/aSoY5I5FNMrzv+hJ+seNlce0sJufFBREfUBlETeLGjejbnoxq2jhyzwGcZe1UAbCJbozi1O4vH5GyQ==", "article"=><ActionController::Parameters {"title"=>"Post title", "lead"=>"Summary or the post", "photo"=>#<ActionDispatch::Http::UploadedFile:0x00008b18957b5az8 @tempfile=#<Tempfile:/tmp/RackMultipart20210122-9530-1nu0w1w.jpg>, @original_filename="tools.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"article[photo]\"; filename=\"tools.jpg\"\r\nContent-Type: image/jpeg\r\n">, "caption"=>"This is the caption of the photo", "rich_body"=>"<div>Some text. The attached image is below.<br><br>The attached image is above<br><br></div>"} permitted: false>, "commit"=>"Créer un(e) Article", "controller"=>"articles", "action"=>"create"} permitted: false>

Any idea of what I am missing?

Many thanks in advance for your help.

Gregory

Answer 1

Are you using ActiveStorage ?

Should have ran commands to create the necessary tables:

bundle exec rails active_storage:install
bundle exec rails db:migrate

Check to ensure you have the two tables active_storage_blobs and active_storage_attachments .

Answer 2

I know this is old but there was an issue similar to this that might have to do with CORS on the S3 bucket. https://github.com/rails/rails/issues/36982#issuecomment-636330624

I'm running into the same issue.