Q&A
前提・実現したいこと
フリマアプリのコピーサイトで、出品商品の編集機能を実装しているところ、http://localhost:3000/items/4/editにアクセス時、以下のようなエラーに遭遇しました。
エラー箇所は、画像複数枚投稿の機能で、投稿時に表示されるプレビューの実装箇所になります。
コントローラーのeditアクションで@item.item_images.buildを記入すると、エラーが発生するようになりました。
お分かりになられる方がおられましたら、ご教示いただけますと幸いです。
発生している問題・エラーメッセージ
ArgumentError in Items#edit Showing /Users/kandakeisuke/Desktop/team_development/freemarket_sample_74a/app/views/items/edit.html.haml where line #18 raised: Nil location provided. Can't build URI. Extracted source (around line #18): - @item.item_images.each_with_index do |item_image, i| .item-image__operetion = image_tag item_image.image.url, data: { index: i }, width: "114px", height: '80px' = item.fields_for :item_images do |item_image| %div{data: {index: "#{item_image.index}"}} = item_image.file_field :image, style: "display:none", class: 'js-file'
該当のソースコード
items_controller.rb
class ItemsController < ApplicationController before_action :move_to_index, except: [:index, :show, :search] before_action :set_item, except: [:index, :new, :create] def index @item = Item.includes(:item_images, :brands, :shippings).order('created_at DESC') @newItems = Item.includes(:item_images).where(buyer_id: nil).limit(3) @item = Item.new @brand = Brand.new end def new @item = Item.new @item.item_images.build @brand = Brand.new @shipping = Shipping.new end def create @item = Item.new(item_params) @brand = Brand.new(brand_params) @shipping = Shipping.new(shipping_params) if @item.save! item_id = @item.id @brand = Brand.new(brand_params.merge(item_id: item_id)) @shipping = Shipping.new(shipping_params.merge(item_id: item_id)) if @brand.save && @shipping.save redirect_to root_path else render :new end else render :new end end def edit @item = Item.find(params[:id]) @item = current_user.items.find(params[:id]) @item.item_images.build @categories = Category.find(params[:id]) @brand = Brand.find(params[:id]) @shipping = Shipping.find(params[:id]) end def update @item = Item.find(params[:id]) @categories = Category.find(params[:id]) @brand = Brand.find(params[:id]) @shipping = Shipping.find(params[:id]) @item = current_user.items.find(params[:id]) # @item.item_images.build # @item.item_images.all binding.pry if @item.update(item_params) redirect_to items_path , notice: '出品情報が更新されました' else render :edit end end private def move_to_index redirect_to action: :index unless user_signed_in? end # def post_params # params.require(:item).permit(:item_name, :size, :price, :content, :status).merge(user_id: current_user.id) # end def item_params params.require(:item).permit(:item_name, :price, :size, :content, :category_id, :status_id, :buyer_id, item_images_attributes: [:image, :_destroy, :id]).merge(user_id: current_user.id, saler_id: current_user.id) end def set_item @item = Item.find(params[:id]) end def brand_params params.require(:brand).permit(:brand) end def shipping_params params.require(:shipping).permit(:ship_base, :region, :city, :block, :ship_method, :ship_date, :prefecture_id) end end
edit.html.haml
.title = link_to image_tag("logo.png", height: '49', width: '185', class: 'logo'), "/" .content .content-main = form_with url:item_path(@item), method: :patch, local: true do |f| .image-product %label.label-edit 出品画像 %sapn.required 必須 %p 最大１０枚までアップロードできます。 .name__image .name__image__set = f.fields_for @item do |item| #image-box #previews - if @item.persisted? - @item.item_images.each_with_index do |item_image, i| .item-image__operetion = image_tag item_image.image.url, data: { index: i }, width: "114px", height: '80px' = item.fields_for :item_images do |item_image| %div{data: {index: "#{item_image.index}"}} = item_image.file_field :image, style: "display:none", class: 'js-file' -# %span{ class: "item-image__operetion--delete#{item_image.index}"} %span.js-remove 削除 - if @item.persisted? = item_image.check_box :_destroy, style: "display:none", data:{ index: item_image.index }, class: 'hidden-destroy' #image-box__square - if @item.persisted? %div{data: {index: "#{@item.item_images.count}"}, class: "js-file_group"} = file_field_tag :image, style: "display:none", name: "item[images_attributes][#{@item.item_images.count}][image]", id:"_item_item_images_attributes_#{@item.item_images.count}_id", class: 'js-file' #image-box__square__var %label{for: "_item_item_images_attributes_#{@item.item_images.count}_id"} %i.fas.fa-camera %p ドラッグアンドドロップ %br またはクリックしてファイルをアップロード .image__message 画像がありません .exhibilion .exhibilion__button = f.submit "変更する", class: 'exhibilionbutton' = f.submit "キャンセル", class: 'exhibilion__save' %a.top__return もどる %p.warning 禁止されている %a 行為 および %a 出品物 を必ずご確認ください。偽ブランド品や盗品物などの販売は犯罪であり、法律に より処罰される可能性があります。 また、出品をもちまして加盟店規約に同意したことになります。 .product__footer .product__footer__link = link_to 'プライバシーポリシー', '/', class: 'footer-link' = link_to 'フリマ利用規約', '/', class: 'footer-link' = link_to '特定商取引に関する表記', '/', class: 'footer-link' .product__footer__logo = image_tag 'logo-white', height: '49', width: '185' %p.logo__tag © FURIMA, Inc.
new_item.js
$(function(){ var dataBox = new DataTransfer(); var file_field = document.querySelector('input[type=file]') const buildFileField = (index) => { const html = `<input type="file" name="item[item_images_attributes][${index}][image]" value style="display:none" id="_item_item_images_attributes_${index}_id" class="js-file">`; return html; } var labels = (index) => { var html2 = `<div id="image-box__container__var"> <label for="_item_item_images_attributes_${index}_id"> <i class="fas fa-camera"></i> </label> </div>`; return html2; } var labels2 = (index) => { var html2 = `<div id="image-box__square__var"> <label for="_item_item_images_attributes_${index}_id"> <i class="fas fa-camera"></i> </label> </div>`; return html2; } const buildImage = (name, src, index) => { const html3 = `<div class='item-image' data-image="${name}"> <div class='item-image__content'> <div class='item-image__content--icon'> <img src=${src} width="114" height="80" > </div> </div> <div class='item-image__operetion'> <div class='item-image__operetion--delete${index}'>削除</div> </div> </div>`; return html3; } const buildImg = (index, url)=> { const html = `<img data-index="${index}" src="${url}" width="114px" height="80px">`; return html; } // 出品商品編集機能 $('#image-box__square').on('change', '.js-file', function(){ console.log("aaa") var files = $('input[type="file"]').prop('files')[$('.item-image__operetion').length]; console.log(files) $.each(this.files, function(i, file) { console.log("each") var fileReader = new FileReader(); dataBox.items.add(file) file_field.files = dataBox.files console.log(file_field.files) var num = $('.item-image__operetion').length + 1 + i $('#image-box__square__var').remove(); $('#image-box__square').append(labels2(num)); $('#image-box__square').append(buildFileField(num)); fileReader.readAsDataURL(file); if (num == 10){ $('.name__image__set').css('display', 'none') } fileReader.onloadend = function() { var src = fileReader.result $('#previews').after(buildImage(file.name, src, num)); }; $(document).on("click", '.item-image__operetion--delete' + num, function(){ var target_image = $(this).parent().parent(); target_image.remove(); var target_file = $('#_item_item_images_attributes_' + (num - 1) + '_id'); target_file.remove(); }); }); }); $('#image-box').on('click', '.js-remove', function() { console.log("hello world"); const targetIndex = $(this).parent().data('index') const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`); if (hiddenCheck) hiddenCheck.prop('checked', true); }); });
試したこと
・コントローラーにて、editアクションにnewを追記したりしました。
あなたの回答
tips
プレビュー
