発生している問題・エラーメッセージ
元々動いてた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="✓" /><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="✓" /><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は省略させていただきました。
「ここを確認してみたら?」といった事でも構いませんので何かアドバイスいただけないでしょうか?
先輩方どうか宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。