【Ruby】ActiveStrageを使った複数画像の投稿と、投稿した画像の全件表示がしたい

Question

前提・実現したいこと

現在railsを使ってポートフォリオを作成しています。
よくあるクチコミサイトのようなサイトで、1つの店舗に対して複数画像が投稿できる機能を実装しているところです。

ActiveStrageを使い、１枚のみの保存・表示はできています。

今実現したい点は2つあります。
①投稿済みの画像を複数表示させたい。
②画像の投稿をできるようにしたい。
です。

情報不足であれば追加いたします。
よろしくお願いいたします。

現在発生しているエラー

エラー表示は出ていません。
投稿フォームの画像選択のほか全ての項目を埋め、送信ボタンを押すとバリデーションを通過できずにnewページがレンダリングされます。

該当のソースコード

　　
下記はトップページのviewです。

  <div class="messages">
    <% store.images.each do |image|  %>
      <%= link_to image_tag( image, class: :card__img), store_path(store) %>
    <% end %>
  </div>

　　
こちらは詳細ページのviewです。

  <% @store.images.each do |image| %>
    <div class="store__image">
    <%= image_tag image, alt: '店舗画像' %>
    </div>
  <% end %>

　　
こちらはstore.rb内の記述です。（バリデーションの記述が長いので一部省略しています。）

  has_many :comments, dependent: :destroy
  has_many :goods, dependent: :destroy
  belongs_to :user
  has_many_attached :images
  
  with_options presence: true do
    validates :name, （中略） ,:bgm, :images
  end

　　
下記はstores_controller.rb内の記述です。

class StoresController < ApplicationController
  def index
    @store = Store.includes(:user)
  end

  def new
    @store = Store.new
  end

  def create
    @store = Store.new(post_params)
    binding.pry
    if @store.valid?
      @store.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
    @comment = Comment.new
    @store = Store.find(params[:id])
    @comments = @store.comments.includes(:user)
  end

  def edit
    @store = Store.find(params[:id]) 
  end

  def update
    @store = Store.find(params[:id])
    if @store.update(post_params)
      redirect_to store_path(@store)
    else
      render :edit
    end
  end

  def destroy
    @store = Store.find(params[:id])
    @store.destroy
    redirect_to root_path
  end

  private
  def post_params
    params.require(:store).permit(:name, :address, :postal_code, :telephone, :url, :closing_day, :business_hour, :fee, :water, :temperature, 
                                  :roryu_status, :roryu_time, :air_bath, :break_place, :television, :bgm, :water_depth, images: [] ).merge(user_id: current_user.id)
  end
end

　　
以下投稿フォームの記述です。

<%= form_with model: store, local: true do |f|%>
  <div class="field">
    <%= f.label :name, "店舗名" %><br />
    <%= f.text_field :name, class: :form__text, id:"store_title" %>
  </div>

  <div class="field">
    <%= f.label :postal_code, "郵便番号" %><br />
    <%= f.text_field :postal_code, class: :form__text, id:"store_catch_copy" %>
  </div>

  <div class="field">
    <%= f.label :address, "住所" %><br />
    <%= f.text_field :address, class: :form__text, id:"store_concept" %>
  </div>

  <div class="field">
    <%= f.label :telephone, "電話番号" %><br />
    <%= f.text_field :telephone, class: :form__text, id:"store_image" %>
  </div>

  <div class="field">
    <%= f.label :url, "公式HP" %><br />
    <%= f.text_field :url, class: :form__text, id:"store_concept" %>
  </div>

  <div class="field">
    <%= f.label :closing_day, "店休日" %><br />
    <%= f.text_field :closing_day, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :business_hour, "営業時間" %><br />
    <%= f.text_field :business_hour, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :fee, "入浴料" %><br />
    <%= f.text_field :fee, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :roryu_status, "ロウリュ" %><br />
    <%= f.text_field :roryu_status, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :roryu_time, "ロウリュの時間" %><br />
    <%= f.text_field :roryu_time, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :temperature, "サウナ室内の温度" %><br />
    <%= f.text_field :temperature, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :television, "サウナ室内のテレビ設置" %><br />
    <%= f.text_field :television, class: :form__text, id:"store_concept" %>
  </div>

  <div class="field">
    <%= f.label :water, "水風呂" %><br />
    <%= f.text_field :water, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :water_depth, "水深" %><br />
    <%= f.text_field :water_depth, class: :form__text, id:"store_concept" %>
  </div>


  <div class="field">
    <%= f.label :air_bath, "外気浴" %><br />
    <%= f.text_field :air_bath, class: :form__text, id:"store_concept" %>
  </div>

  <div class="field">
    <%= f.label :break_place, "インターバル" %><br />
    <%= f.text_field :break_place, class: :form__text, id:"store_concept" %>
  </div>
  
  <div class="field">
    <%= f.label :bgm, "サウナ内BGM" %><br />
    <%= f.text_field :bgm, class: :form__text, id:"store_concept" %>
  </div>

  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, id: "message_image", multiple: true %>
    <div id="image-list"></div>
  </div>

  <div class="actions">
    <%= f.submit "登録する", class: :form__btn  %>
  </div>
<% end %>

下記、プレビュー機能を実装したJavaScriptのコードです。

document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('store_image')){
    const ImageList = document.getElementById('image-list')
    
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div')
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length
      
      const blobImage = document.createElement('img')
      blobImage.setAttribute('src', blob)

      const inputHTML = document.createElement('input')
      inputHTML.setAttribute('id', `store_image_${imageElementNum}`)
      inputHTML.setAttribute('name', 'store[images][]')
      inputHTML.setAttribute('type', 'file')

      imageElement.appendChild(blobImage)
      imageElement.appendChild(inputHTML)
      ImageList.appendChild(imageElement)

      inputHTML.addEventListener('change', (e) => {
        file = e.target.files[0];
        blob = window.URL.createObjectURL(file);

        createImageHTML(blob)
      })
    }

    document.getElementById('store_image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  };
});

試したこと

モデル内のバリデーションにて:imagesのみ削除し、画像なしで投稿できるか試してみたところその他の情報は正しく保存され、またローカル環境でも正しく表示されていました。

（追記）
Stores_controller.rb内のcreateアクションにて取得したparamsの中身を確認したところ、下記のように添付した画像2つは取得できているように思います。
しかしデータベースに保存されている画像は1枚のみです。

 <ActionController::Parameters {"authenticity_token"=>"CuKTE0J3Va0ohKVkCyvbutsgYI08W5k42v9ybDmbb2d5xGiU6yueUvWuVFH8NF02uPkilKl16TooYEPLanjNqA==", "store"=><ActionController::Parameters {"name"=>"熱い湯", "postal_code"=>"123-4567", "address"=>"県", "telephone"=>"無", "url"=>"無", "closing_day"=>"無", "business_hour"=>"無", "fee"=>"200", "roryu_status"=>"無", "roryu_time"=>"無", "temperature"=>"100", "television"=>"無", "water"=>"10", "water_depth"=>"100", "air_bath"=>"無", "break_place"=>"無", "bgm"=>"無", "images"=>[#<ActionDispatch::Http::UploadedFile:0x00007fa67a60c048 @tempfile=#
<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210820-1656-4p688y.png>, @original_filename="200x200.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"store[images][]\"; filename=\"200x200.png\"\r\nContent-Type: image/png\r\n">]} permitted: false>, "message"=>{"images"=>[#<ActionDispatch::Http::UploadedFile:0x00007fa67a617bf0 @tempfile=#
<Tempfile:/var/folders/8c/bzvqv8g14h9fsrkg93q1kjx40000gn/T/RackMultipart20210820-1656-7kbbi8.png>, @original_filename="200x200.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"message[images][]\"; filename=\"200x200.png\"\r\nContent-Type: image/png\r\n">]}, "commit"=>"登録する", "controller"=>"stores", "action"=>"create"} permitted: false>

Comments

[J_O]

・投稿フォームはどうなっていますか？
・記載のmodelとcontrollerはStoreクラスというこうでよかったですか？
・複数投稿はエラーが出ていますか？どこで躓いているか詳細を記載いただければと思います。

[kawanoonigiri]

J_Oさん
コメントありがとうございます。
投稿フォームのコードについて質問内に追記いたしました。
modelとcontrollerはおっしゃる通りStoreクラスです。
エラー文は出ておりません。投稿フォームの画像選択のほか全ての項目を埋め送信ボタンを押すと、バリデーションを通過できていないようでnewページがレンダリングされています。

追加情報が必要でしたら改めて対応いたします。
よろしくお願いいたします。

Answer 1

投稿フォームですが、name属性を削除して、末尾にmultiple: trueを追記して試してみてください。

  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, id:"store_image", multiple: true %>
    <div id="image-list"></div>
  </div>

あと全体のコードどうなっているのかわからないのですが、
<%= form_with model: store, local: true do |f|%>　のstoreでエラーにならないのかが少し気になりました、、、

Comments

[kawanoonigiri]

ご対応ありがとうございます。
上記コードにて挙動の確認をした結果、2枚画像を添付して送信すると最初の1枚目が保存され2枚目は保存されていないようです。表示される画像もその1枚が表示されるという挙動になりました。
フォーム送信時のparamsの中身について追記しておりますので、もし参考になればご確認いただければと思います。

[J_O]

パラメータがおかしいですね。
通常"store"=>{"images",,,,,になるはずなんですが、messageになってますね。先述したとおりname属性は削除されていますか？
ただ、挙動としては一枚だけ登録されているのも不思議ですが、、、

form_withのコードとその紐づいているcontrollerのaction(おそらくnew_actionですかね？)を中略せずに載せてください。

[kawanoonigiri]

度々のご対応、ありがとうございます。
ご指摘いただきましたコードについて質問内に追記しております。
また、パラメータの値がおかしいとのことですので再度name属性削除されているか確認の上、再取得したparamsの値を掲載しております。
よろしくお願いいたします。

[J_O]

やっぱりパラメータがおかしいですね。
一つはちゃんと"store"=>{"images"=>,,で指定されていますが、もう一つの画像のパラメータが "message"=>{"images"=>,,,"になってますね。
ただ、"message"=>{"images"になっている原因は不明なんで、とりあえずname属性を無理やり指定して投稿できるか確認してください。

<%= f.file_field :images, name: "store[images][]", id:"store_image", multiple: true %>

[kawanoonigiri]

ご指摘いただいた点修正の上投稿してみましたが、やはり反映されているのは1枚のみでした。
もしかすると画像プレビュー機能をJavascriptにて実装済みなのですが、そちらが影響しているかもしれないのでコードを追記いたしました。

[J_O]

jsを全て削除して登録できればjsが原因ですね

[kawanoonigiri]

ご指摘の通りjsが適用されないようコメントアウトの上動作確認したところ、複数枚での投稿ができました。
jsに関してはこれから中身の確認をしていきます。
数日に渡りお付き合いいただきましてありがとうございました。

[J_O]

jsはあまり得意ではないので、
もし解決できなければ、再度新しく質問することをお勧めします！！
お力になれずすみません、、、

[kawanoonigiri]

ありがとうございます。
jsについては自力で解決できました！
ありがとうございました！