Upload images with trix in Rails using carrierwave

Question

I'm building a blog engine using Rails 5.2 and Trix. I'm able to display perfectly my WYSIWYG editor but I've been having lots of issues trying to upload images. I've seen the Go Rails tutorial but it does not fit with Carrier Wave. I'm able to make posts successfully but when I add an image and make the post, the image disappears.

So I have a simple Post table like so:

class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :body
      

      t.references :user
      t.timestamps
    end
  end
end

And I have my Photos column separately:

class AddPhotosToPosts < ActiveRecord::Migration[5.2]
  def change
    add_column :posts, :photos, :json
  end
end

This is my actual form for creating a post:

<%= form_with(model: post, local: true) do |form| %>
    <div class="actions">

        <div class="form-field">
            <%= form.text_field :title %>
        </div>

        <div class="form-field">
            <trix-editor input="post_body"></trix-editor>

            <p>
                <%= form.label :photos %>
                <%= form.file_field :photos %>
            </p>
        </div>

        <%= form.submit %>
    </div>
<% end %>

On my Post.rb model I added mount_uploaders :photos, PhotoUploader in plural because based on the Carrier Wave docs I want to let people upload multiple images.

And this is my uploading_images.js located inside the javascript folder:

(function() {
    var host, uploadAttachment;

    document.addEventListener("trix-attachment-add", function(event) {
        var attachment;
        attachment = event.attachment;
        if (attachment.file) {
        return uploadAttachment(attachment);
        }
    });

    host = "/photos";

    uploadAttachment = function(attachment) {
        var file, form, xhr;
        file = attachment.file;
        form = new FormData;
        
        form.append("Content-Type", file.type);
        form.append("image[image]", file);
        
        xhr = new XMLHttpRequest;
        xhr.open("POST", host, true);
        
        xhr.upload.onprogress = function(event) {
            var progress;
            progress = event.loaded / event.total * 100;
            return attachment.setUploadProgress(progress);
        };
        
        xhr.onload = function() {
            var href, url;
            
            url = href = JSON.parse(this.responseText).url;
            return attachment.setAttributes({
                url: url,
                href: href
            });
        };
        return xhr.send(form);
    };

}).call(this);

(The code above was from another post here in StackOverflow, I think it works but I think I'm missing something)

So, do I need a Photos controller and a model separately? And if so, how can I make this approach? I'm so bad at front end stuff so I will appreciate your help!

Answer 1

I got it working for my implementation, @theKid, although it took awhile and I had to navigate several issues. If you want to have multiple photos per post, you'll want to create a Photo scaffold, like Chris did.

You should be able to follow his tutorial almost exactly, except that you'd have a Carrierwave initializer and your Photo model would look like this:

class Photo < ApplicationRecord
  mount_uploader :image, FileUploader
end

Feel free to add more comments with any questions. There's a lot going on here, with Trix, JavaScript, XHR requests, Rails, and Carrierwave, so my best advice would be to isolate each step so you can clearly debug any issues.