画像を複数同時にアップロード、DBに保存したい。

Question

複数同時にプレビューした画像をアップロード、DBに保存したいのですが、上手くいきません。
multiple: trueやparams.require(:item).permit(:name, item_images_attributes: {images: []})など複数同時にアップロード、保存するのに必要そうなコードは使ってもダメでした。
コードの記入の仕方がおかしいのか、まだ記入したりないコードがあるのかどうかご教授いただければ幸いです。
よろしくお願いします。

new.html.erb

<%= form_for @item do |f| %>
      <main class="single-main">
        <section class="l-single-container buy-item-container">
          <div data-reactroot="">
            <div class="sell-container-inner">
              <h2 class="l-single-head">商品の情報を入力</h2>
              <form class="sell-form">
                <div class="sell-upload-box">
                  <h3 class="sell-upload-head">画像
                    <span class="form-require">必須</span>
                  </h3>
                  <p>2枚までアップロードできます</p>
                  <div class="sell-dropbox-container clearfix">
                    <div class="sell-upload-items have-item", id="items">
                      <%= f.fields_for :item_images do |image| %>
                        <ul id="item">
                          <li class="sell-upload-item">
                            <div class="sell-upload-item-1">
                              <figure class="sell-upload-figure figure-1">
                                <img>
                                <input type="file" class="sell-upload-drop-file" multiple="multiple" name="image[]" style="display: none">
                                <pre class="visible-pc-1">ドラッグアンド<br>ドロップ<br>またはクリックして<br>ファイルを<br>アップロード</pre>
                                <%=image.file_field :image %>
                              </figure>
                            </div>
                          </li>
                          <li class="sell-upload-item">
                            <div class="sell-upload-item-2">
                              <figure class="sell-upload-figure figure-2">
                                <img>
                                <input type="file" class="sell-upload-drop-file" multiple="multiple" name="image[]" style="display: none">
                                <pre class="visible-pc-2">ドラッグアンド<br>ドロップ<br>またはクリックして<br>ファイルを<br>アップロード</pre>
                                <%= image.file_field :image %>
                              </figure>
                            </div>
                          </li>
                        </ul>
                      <% end %>
                    </div>
                  </div>
                </div>
　　　　　　　　　 <div class="sell-content">
                  <div class="form-group">
                    <%= f.label :商品名 %>
                      <span class="form-require">必須</span>
                    <div>
                      <%= f.text_field :name, class: "input-default", value: "", placeholder: "商品名（必須 40文字まで)" %>
                    </div>
                  </div>
                </div>
                <button type="submit" class="btn-default btn-red">アップロード</button>
                <a href="/" class="btn-default btn-gray">もどる</a>
              </form>
              <div class="overlay"></div>
            </div>
          </div>
        </section>
      </main>
    <% end %>

items_controller.rb

class ItemsController < ApplicationController

  def index
  end

  def new
    @item = Item.new
    @item.item_images.build
  end

  def show
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      redirect_to :root
    else
      render :new
    end
  end

  private

  def item_params
    params.require(:item).permit(
      :name,
      item_images_attributes: :images
      )
  end
end

item_image.rb

class ItemImage < ApplicationRecord
  belongs_to :item
  mount_uploader :image, ImageUploader

  validates :image,
            presence: true
end

item.rb

class Item < ApplicationRecord
  has_many :item_images, dependent: :destroy
  
  accepts_nested_attributes_for :item_images

  validates :name,
            presence: true
end

追記
new.html.erb

<input type="file" class="sell-upload-drop-file" multiple="multiple" name="image" style="display: none">のname="image"を、name="image[]"に変更
他にもname="image-1"や"image-2"と名前を別々にして試しました。

<%= image.file_field :image, multiple: "true" %>を、<%= image.file_field :image　%>に変更。
paramsを受け取れなかったため。

items_controller.rb

item_images_attributes: {images: []}を、item_images_attributes: :imagesに変更。
上記同様、paramsを受け取れなかったため。

Answer 1

同名nameは全てにデータがある場合、上書きされてhtml上で最下部のもののみ送られることになります。
radioをイメージしていただければと。
既に回答にあるように配列で受け取りループで受け取るか、別nameをつけてそれぞれ受け取ってください。

Comments

[hiromats]

radioは使ったことがないので、よく分かりませんが、同名のデータを送ろうとすると上書きされるということは理解出来ました。
その方法で試してみます。

[hiromats]

他の回答者にもコメントしましたが、駄目でした。
違う視点で考えてみようと思います。

[m.ts10806]

どのようなコードになったか質問文を更新してください。
もうひとつの回答者さんもこちらの意図通りに反映されているか確認したいと思うので。

[hiromats]

申し訳ありません。
更新しました。
そちら側の意図とは違う書き方になってるかもしれませんが、よろしくお願いいたします。

[hiromats]

すいません、自己解決しました。
回答ありがとうございました。

Answer 2

htmlの<input type="file" class="sell-upload-drop-file" multiple="multiple" name="image" style="display: none">の部分、2回出てきていますが、name="image[]"と配列にすべきでは？

Comments

[hiromats]

指摘されるまで気にしていませんでしたが、配列にするやり方はまだよく分かっていないので、調べてみようと思います。
name ="image[]"と配列にすべき、とは[]に使い回すコードを入れるということでしょうか？

[colling]

いえ、name="image" だとサーバのtempフォルダに送った時、上書きされるので、name="image[]"で複数個送るような感じです

[hiromats]

なるほど、同名を使う場合は配列にしないと上書きされると。
PCを開いたら、name＝"image"の箇所を、name＝"image[]"に修正して試してみます。

[hiromats]

試してみましたが、上手くいきませんでした。
nameの名前を変えても同じくです。

[colling]

mts10806さんが書いておられるように、受け取り側の処理も配列から１つずつ取り出さなくてはいけません。

[hiromats]

申し訳ありません。
更新しました。
そちら側の意図とは違う書き方になってるかもしれませんが、よろしくお願いいたします。

[hiromats]

すいません、自己解決しました。
回答ありがとうございました。

Answer 3

自己解決しました。
item_image.rbにbelongs_to :userと、繋がっていないテーブルとアソシエーションを組もうとしていたのが原因でした。
質問の内容には書いていませんが、必要最低限の情報だけここに記そうとしたので、書きませんでした。
回答してくださった方々お手数をかけてして申し訳ありません。

Comments

[m.ts10806]

何が必要な情報かは質問者さんが決めることではない、というのが実際です。
質問する場合は何が必要かわからない状態かと思うので基本的には全て提示してください。
提示していない部分に実は的確な回答を得るために必要な情報があると、回答者を振り回す結果になります(後出しはどの場面でもされる方にとっては辛いですよね)

[hiromats]

はい、申し訳ありませんでした。
言い訳になりますが、コードが冗長になると読みづらくなり、回答者の方も読む気を無くすのではないかと素人ながらいらない気遣いをしてしまいました。
わざわざ付き合ってくださってありがとうございました。

[m.ts10806]

んー。そこは読んでみないと分からないところがありますね。
私個人としては必要なところが削られるよりマシと言ったところです。
ちょこちょこ削るとそれも必要なところを削ってしまう可能性もありますしね。
今回で言うとデザインに関係するところはあまり関係ないのでformに関連するところだけ切り出すとかすると良かったかもしれません。
今後の参考にしてみてください。

[hiromats]

はい、参考にさせていただきます。
切り出しは上手く出来るか分かりませんが、今回のように最低限の情報だけに絞らないよう気をつけていきます。

[m.ts10806]

もし切り出しうまくできてなくても「他にもこういった情報が欲しい」というのは回答者の方から追記依頼があると思いますので、都度対応していって質問の精度を上げていけばいいかなと思います。やっていくうちに自分でも問題が整理できていって自己解決に至れる頻度も上がってくるでしょう。
がんばってください。

[hiromats]

今回もご親切にありがとうございました。
とてもタメになります。