🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

709閲覧

attributesしたparamだけがコントローラに渡ってこない

pecchan

総合スコア591

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/01/20 05:37

編集2021/01/20 05:39

発生している問題・エラーメッセージ

元々動いてたitem登録画面があったのですが、ビューを大きく変更する必要があり、その修正を行ったところ、itemに紐づく画像だけが登録できなくなりました。

現象としては、DBと画像ファイル、ともに登録できなくなりました。

動いている方のプログラムと比較したところ、
「images_attributes」というパラメータが渡ってきてませんでした。
これが渡ってきてないのが原因のようです。

ビューを変更したこともあり、html上のパラメータの書き出しが失敗してるようです。
※そのためタグにrails6だけなくhtml5も追加しました

そこでビューが書き出したhtmlを正常な方と失敗してる方、両方を比較しました。

動いている方

html

1<form class="new_item" id="item-form" enctype="multipart/form-data" action="/items" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="sjfMVyX7XVgc2gFYP0/lBv0hXwREIzAFpwPXsSMbfbV46XNh4SO8cL5v9UsQmpaWe4IraHfAUfR1QBWRKuJE0A==" /> 2 3 4 <input type="hidden" name="item[user_id]" id="item_user_id" /> 5 6 <label for="item_images">Images</label> <label class="optional_field" for="images">(任意)</label> 7 <div class="form-image_text">10枚まで追加できます</div> 8 9 <div class="clearfix"> 10 <!--写真のプレビューとインプットボタンのul --> 11 <ul id="previews" class="list-inline"> 12 <li class="input"> 13 <label class="upload-label"> 14 <div class="upload-label__text"> 15 <p>ドラッグアンドドロップまたはクリックしてファイルをアップロード</p> 16 <div class="input-area"> 17 <input class=" image_upload" multiple="multiple" type="file" name="item[images_attributes][0][src][]" id="item_images_attributes_0_src" /> 18 </div> 19 </div> 20 </label> 21 </li> 22 </ul> 23 </div> 24 <!-- 以下略-->

失敗してる方

html

1 2<form class="new_item" id="item-form" enctype="multipart/form-data" action="/items" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="PJdUAVlpd05bKdEbofXuFTJiVyEXE7MNmW03hg4q5e7sESTOKUhdtftknor5aQwnVH1ae+TJQRbaHbZrmvBEOg==" /> 3 4 5 <input type="hidden" name="item[user_id]" id="item_user_id" /> 6 7 <div class="form__inner"> 8 <label for="item_images"> 9 画像 <span class="label label-default">(任意)</span> 10</label> 11 <div class="form-image_text">10枚まで追加できます</div> 12 13 <!-- 新規 --> 14 <ul class="horizontal-img-list" > 15 <li class="camera-width"> 16 <label class="upload-img" > 17 <div class="upload-img__inner"> 18 <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;"> 19 <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" > 20 <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path> 21 </svg> 22 <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p> 23 </div> 24 <!-- ./ upload-img__inner --> 25 </label> 26 <!-- ./ upload-img --> 27 28 </li> 29 <li class="horizontal-img-list__item"> 30 <div class="image-trim"> 31 <img src="data:image/jpeg;base64,/9j/4gABPA"> 32 </div> 33 <div class="img-del-btn"> 34 <button class="btn btn-danger btn-xs">削除</button> 35 </div> 36 <input style="display: none;" class="input-img" type="file" multiple="multiple" name="item[images_attributes][0][src][]" id="item_images_attributes_0_src"> 37 </li> 38 </ul> 39 40 </div> 41 <!-- /. form__inner --> 42 <!-- 以下略-->

ところが確認すると、パラメータの記述は同じでした。
そのためここで行き詰まってしまいました。

html

1name="item[images_attributes][0][src][]"

試したこと

html

1name="item[images_attributes][0][src][]"

上記の数値の部分は、画像の枚数でjsによってindexが入ります。

「検証」で確認しましたが特に問題ありませんでした。

javascript

1 // DB登録用にidとnameを振る 2 let $inputs = $('.horizontal-img-list').find('.input-img'); 3 $inputs.each( function( num, input ){ 4 //nameの番号を更新するために、現在の番号を除去 5 $(input).removeAttr('name'); 6 $(input).attr({ 7 name:"item[images_attributes][" + num + "][src][]", 8 id:"item_images_attributes_" + num + "_src" 9 }); 10 });

補足情報

ビュー以外変更ないためmodelやcontrollerは省略させていただきました。

「ここを確認してみたら?」といった事でも構いませんので何かアドバイスいただけないでしょうか?
先輩方どうか宜しくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

お騒がせして申し訳ありません。
単なるコーディングミスでした。

投稿2021/01/21 06:33

pecchan

総合スコア591

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問