如何在 Rails Active Storage 中使用 DropzoneJS 进行多次上传？

Question

I am following this tutorial to do multiple file uploads with DropzoneJS but I don't know how to get multiple images belonging to a model to show in the 'show' page. Only one image shows when I upload multiple images, despite doing a .each in the @post.feature_image array.

Tutorial here: https://web.archive.org/web/20191223022642/https://web-crunch.com/rails-drag-drop-active-storage-stimulus-dropzone/

Example Repo: https://github.com/justalever/drag_and_drop_active_storage

Changes I have made to get it working: _form.html.erb

data-dropzone-max-files="10"

posts/show.html.erb

 <%= link_to @post do %>
    <% @post.feature_image.each do |image| %>
      <%= image_tag image %>
    <% end %>
  <% end %>

models/post.rb

class Post < ApplicationRecord
  belongs_to :user
  has_many_attached :feature_image
end

Please help- what am I doing wrong?

Answer 1

Ran into the same issue with the same tutorial and goal, and I just figured it out!

1. Pluralize the name of your association, has_many_attached :feature_images

class Post < ApplicationRecord
  belongs_to :user
  has_many_attached :feature_images
end

2. Add multiple: true to your file field (don't forget to also pluralize the association name there as well!)

<%= form.file_field :feature_images, direct_upload: true, multiple: true, data: { target: 'dropzone.input' } %>

3. Update your post_params controller method to allow an array of feature_images rather than expecting one attachment:

def post_params
  params.require(:post).permit(:title, :body, feature_images: [])
end

That should be all. Some more info here https://guides.rubyonrails.org/active_storage_overview.html#has-many-attached