質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,207

hiromats

score 17

複数同時にプレビューした画像をアップロード、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を受け取れなかったため。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/21 12:04

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

    キャンセル

  • 2018/11/21 14:40

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

    キャンセル

  • 2018/11/22 06:36

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

    キャンセル

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/21 11:18

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

    キャンセル

  • 2018/11/21 14:39

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

    キャンセル

  • 2018/11/22 06:36

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

    キャンセル

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/22 07:02

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

    キャンセル

  • 2018/11/22 07:05

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

    キャンセル

  • 2018/11/22 07:09

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る