Q&A商品の出品をしたいのですが、画像だけデータベースに保存されません。
エラー文も出てこず苦戦しています。
contents_controller
class ContentsController < ApplicationController def index end def show # @content = Content.find(params[:id]) # ↑↑↑showアクションで使うインスタンス変数を作っときます。 end def new @category_parent_array = Category.where(ancestry: nil) if user_signed_in? @content = Content.new @content.images.new else redirect_to root_path end end def create @content = Content.new(content_params) @content.images.present? @content.save! redirect_to root_path end def get_category_children @category_children = Category.find("#{params[:parent_id]}").children end def get_category_grandchildren @category_grandchildren = Category.find("#{params[:child_id]}").children end private def content_params params.require(:content).permit(:name, :category_id, :price, :explain, :size, :brand, :status, :postage, :shipment, :prefecture, images_attributes: {content_image: []} ).merge(user_id: current_user.id) end end
content.rb
class Content < ApplicationRecord enum size: {"XXS以下": 0, "XS(SS)": 1, "S": 2, "M": 3, "L": 4, "XL(LL)": 5, "2XL(3L)": 6, "3XL(4L)": 7, "4XL(5L)以上": 8, "FREESIZE": 9, "該当なし": 10} enum status: {"新品・未使用": 1, "未使用に近い": 2,"目立った傷や汚れなし":3,"やや傷や汚れあり":4,"傷や汚れあり":5,"全体的に状態が悪い":6} enum postage: {"送料込み（出品者負担)":1, "送料込み（出品者負担）":2, "着払い（購入者負担）":3, "着払い（購入者負担）":4} enum shipment: {"1~2日で発送":1, "2〜3日で発送":2,"4〜7日で発送":3} enum prefecture:{ "北海道":1,"青森県":2,"岩手県":3,"宮城県":4,"秋田県":5,"山形県":6,"福島県":7, "茨城県":8,"栃木県":9,"群馬県":10,"埼玉県":11,"千葉県":12,"東京都":13,"神奈川県":14, "新潟県":15,"富山県":16,"石川県":17,"福井県":18,"山梨県":19,"長野県":20, "岐阜県":21,"静岡県":22,"愛知県":23,"三重県":24, "滋賀県":25,"京都府":26,"大阪府":27,"兵庫県":28,"奈良県":29,"和歌山県":30, "鳥取県":31,"島根県":32,"岡山県":33,"広島県":34,"山口県":35, "徳島県":36,"香川県":37,"愛媛県":38,"高知県":39, "福岡県":40,"佐賀県":41,"長崎県":42,"熊本県":43,"大分県":44,"宮崎県":45,"鹿児島県":46,"沖縄県":47} belongs_to :category belongs_to :user has_many :images, dependent: :destroy accepts_nested_attributes_for :images, allow_destroy: true validates :name, :explain, presence: true validates :price,presence: true,numericality: { only_integer: true, greater_than_or_equal_to: 300, less_than_or_equal_to: 9999999} validates :category_id, numericality: { only_integer: true, greater_than_or_equal_to: 1, less_than_or_equal_to: 1000} scope :category, ->(category_id) {where(category_id: category_id).order(created_at: "DESC").limit(10)} end
image.rb
class Image < ApplicationRecord belongs_to :content, optional: true validates :content_image, presence: true mount_uploaders :content_image, ImageUploader end
new.html.haml
= f.fields_for :images do |image| .clearfix // 写真のプレビューとインプットボタンのul %ul#previews %li.input // 画像を取り込むインプットボタン %label.upload-label .upload-label__text ドラッグアンドドロップ %br またはクリックしてファイルをアップロード .input-area = image.file_field :content_image, class: "hidden image_upload", multiple: true
content.js
$(function(){ $(document).on('turbolinks:load', function(){ // 下記はedit用です。できれば別ファイルで作成することを推奨。バグの元 var append_input = $(`<li class="input"><label class="upload-label PhotosBottom"><div class="upload-label__text">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード<div class="input-area"><input class="hidden image_upload" type="file"></div></div></label></li>`) $ul = $('#previews') $lis = $ul.find('.image-preview'); $input = $ul.find('.input'); if($input.length == 0){ if($lis.length <= 3 ){ $ul.append(append_input) $('#previews .input').css({ 'width': `calc(100% - (20% * ${$lis.length}))` }) } else if($lis.length == 4 ){ $ul.append(append_input) $('#previews .input').css({ 'width': `100%` }) } } //newにおいては、下記が本題 // プレビュー機能 //'change'イベントでは$(this)で要素が取得できないため、 'click'イベントを入れた。 //これにより$(this)で'input'を取得することができ、inputの親要素である'li'まで辿れる。 $(document).on('click', '.image_upload', function(){ //inputの要素はクリックされておらず、inputの親要素であるdivが押されている。 //だからdivのクラス名をclickした時にイベントが作動。 //div（this）から要素を辿ればinputを指定することが可能。 //$liに追加するためのプレビュー画面のHTML。横長でないとバグる var preview = $('<div class="image-preview__wapper"><img class="preview"></div><div class="image-preview_btn"><div class="image-preview_btn_delete">削除</div></div>'); //次の画像を読み込むためのinput。 var append_input = $(`<li class="input"><label class="upload-label"><div class="upload-label__text">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード<div class="input-area"><input class="hidden image_upload" type="file"></div></div></label></li>`) $ul = $('#previews') $li = $(this).parents('li'); $label = $(this).parents('.upload-label'); $inputs = $ul.find('.image_upload'); //inputに画像を読み込んだら、"プレビューの追加"と"新しいli追加"処理が動く $('.image_upload').on('change', function (e) { //inputで選択した画像を読み込む var reader = new FileReader(); // プレビューに追加させるために、inputから画像ファイルを読み込む。 reader.readAsDataURL(e.target.files[0]); //画像ファイルが読み込んだら、処理が実行される。 reader.onload = function(e){ //previewをappendで追加する前に、プレビューできるようにinputで選択した画像を<img>に'src'で付与させる // つまり、<img>タグに画像を追加させる $(preview).find('.preview').attr('src', e.target.result); } //inputの画像を付与した,previewを$liに追加。 $li.append(preview); //プレビュー完了後は、inputを非表示にさせる。これによりプレビューだけが残る。 $label.css('display','none'); // inputを非表示 $li.removeClass('input'); // inputのクラスはjQueryで数を数える時に邪魔なので除去 $li.addClass('image-preview'); // inputのクラスからプレビュー用のクラスに変更した $lis = $ul.find('.image-preview'); // クラス変更が完了したところで、プレビューの数を数える。 $('#previews li').css({ 'width': `114px` }) //"ul"に新しい"li(inputボタン)"を追加させる。 if($lis.length <= 3 ){ $ul.append(append_input) $('#previews li:last-child').css({ 'width': `calc(100% - (20% * ${$lis.length}))` }) } else if($lis.length == 4 ){ $li.addClass('image-preview'); $ul.append(append_input) $('#previews li:last-child').css({ 'width': `100%` }) } //inputの最後の"data-image"を取得して、input nameの番号を更新させてる。 // これをしないと、それぞれのinputの区別ができず、最後の1枚しかDBに保存されません。 // 全部のプレビューの番号を更新することで、プレビューを削除して、新しく追加しても番号が1,2,3,4,5,6と綺麗に揃う。だから全部の番号を更新させる $inputs.each( function( num, input ){ //nameの番号を更新するために、現在の番号を除去 $(input).removeAttr('name'); $(input).attr({ name:"product[images_attributes][" + num + "][name]", id:"product_images_attributes_" + num + "_name" }); }); }) }) }); $(document).on('click','.image-preview_btn_delete',function(){ var append_input = $(`<li class="input"><label class="upload-label"><div class="upload-label__text">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード<div class="input-area"><input class="hidden image_upload" type="file"></div></div></label></li>`) $ul = $('#previews') $lis = $ul.find('.image-preview'); $input = $ul.find('.input'); $ul = $('#previews') $li = $(this).parents('.image-preview'); //"li"ごと削除して、previewとinputを削除させる。 $li.remove(); // inputボタンのサイズを更新する、または追加させる // まずはプレビューの数を数える。 $lis = $ul.find('.image-preview'); $label = $ul.find('.input'); if($lis.length <= 3 ){ // inputのサイズを変更 $('#previews li:last-child').css({ 'width': `calc(100% - (20% * ${$lis.length}))` }) } else if($lis.length == 4 ){ $ul.append(append_input) // inputのサイズを変更 $('#previews li:last-child').css({ 'width': `100%` }) } }); });
回答1件
0
自己解決
name:"product[images_attributes][" + num + "][name]", id:"product_images_attributes_" + num + "_name"
ここの記述がcontentではなくproductになっているのと、nameのところをcontent_imageに変えるとうまく保存されました！
投稿2020/07/30 01:54
総合スコア5
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。