質問編集履歴

コードの追記

2019/11/12 14:08

投稿

Hiro191110

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,7 +1,5 @@
 ### 実現したいこと
 Railsで商品の出品、売買ができるフリマアプリを作っております。
 accepts_nested_attributes_forを使って複数モデルの同時保存(update)を行いたいのですが、
@@ -32,8 +30,6 @@
 ### 前提
 ・商品と画像は別々のテーブルを作成
 ・accepts_nested_attributes_forを使って、画像テーブル(子)を商品テーブル(親)へネスト
@@ -98,6 +94,20 @@
 ```Ruby
+.items-sell-wrapper.edit_item
+  = render "items/header"
+  %main.items-sell-main
+    %section.items-sell-content__section
+      %h2.items-sell-content__section__header
+        商品の情報を入力
+    .items-sell-container
       = form_with model: @item, local: true, class: "dropzone", id: "item-dropzone" do |f|
         %section.items-sell-content__section
@@ -124,12 +134,324 @@
                     %p.image-upload-text ここをクリックして画像をアップロード
-                    = item_image.file_field :image, style: "display: none;", name: "item[item_images_attributes][#{@item.item_images.length}][image]", id: "upload-image-0", class: "upload-image", 'data-image': 0
-```
+                    = item_image.file_field :image, style: "display: none;", name: "item[item_images_attributes][#{@item.item_images.length}][image]", id: "upload-image-0", class: "upload-image {validation-error if @item.errors.full_messages_for(:item_images).present?}", 'data-image': 0
+```
+**Controller**
+items_controller.rb
+```Ruby
+  def update
+    @item = Item.find(params[:id])
+    # 登録済画像のidの配列を生成
+    ids = @item.item_images.map{|image| image.id}
+    # 登録済画像のうち、編集後も残っている画像のidの配列を生成
+    exist_ids = registered_image_params[:ids].map(&:to_i)
+    # 登録済画像が残っていない場合(配列に0が格納されている)、配列を空にする
+    exist_ids.clear if exist_ids[0] == 0
+    if (exist_ids.length != 0 || new_image_params[:images][0] != " ") && @item.update!(create_params)
+      # 登録済画像のうち削除ボタンが押された画像を削除
+      unless ids.length == exist_ids.length
+        # 削除する画像のidの配列を生成
+        delete_ids = ids - exist_ids
+        delete_ids.each do |id|
+          @item.item_images.find(id).destroy
+        end
+      end
+    end
+  end
+  private
+  def create_params
+    params.require(:item).permit(:name, :description, :category_id, :item_state_id, :deliver_expend_id, :deliver_method_id, :prefecture_id, :deliver_day_id, :amount, item_images_attributes: [:image])
+  end
+  def registered_image_params
+    params.require(:registered_images_ids).permit({ids: []})
+  end
+```
 ```javascript
+$(document).on("turbolinks:load", function() {
+  var input_area = $(".input_area")
+  var preview = $(".preview")
+  // editでのみ発火するよう制限
+  var re = new RegExp('/items/[0-9]+/edit$');
+  if(!re.test(location.pathname)) {
+   return;
+  }
+  for (var i = preview.length; i > 1; i--) {
+    preview[i-1].remove();
+  }
+  preview = $('.preview');
+  // 登録済画像データのidを格納する配列を作成
+  // ブラウザ上で削除された画像のidをコントローラへ送り返す
+  var registered_images_ids = [];
+  // 新規追加画像データ用の配列(DB用)
+  var new_image_files = [];
+  gon.item_images.forEach(function(image, index) {
+    var img = $(`<div class = "img-view">
+                   <img>
+                   <div class="btn-wrapper">
+                     <div class="btn-edit">編集</div><!--
+                     --><div class="btn-delete">削除</div>
+                   </div>
+                 </div>`);
+    img.data("image", index)
+    binary_data = gon.item_images_binary_datas[index]
+    // 登録済画像データをsrcプロパティへ付与
+    img.find("img").attr({
+      src: binary_data
+    });
+    // 登録済画像データのidを配列へ格納
+    registered_images_ids.push(image.id)
+    // 登録済画像データを持たせたHTMLタグを、ビューへ追加してプレビューを表示させる
+    preview.append(img);
+  });
+  // プレビュー表示されている画像の枚数に応じて、ラベルの大きさを調整
+  inputs_length = $('[type="file"].upload-image').length;
+  $(`.items-sell-container__dropzone0`).attr('class',`items-sell-container__dropzone${inputs_length}`);
+  // プレビュー画像の表示をラベル要素の前に移動させる
+  $('.dropzone-box').before($('.img-view'))
+  // 画像を新規追加
+  //inputの中身の変更時に発生
+  $(document).on('change', '[type="file"].upload-image', function(event) {
+    // 変更を行ったinputを取得する
+    changed_input = $(this);
+    changed_id = changed_input.data('image');
+    // 現時点でのfile用inputタグを全取得する
+    inputs_length = $('[type="file"].upload-image').length;
+    //変更されたinputが末尾のinput（空欄からの追加）の場合、inputを更に追加
+    if(changed_id === inputs_length - 1 && inputs_length <= 10) {
+      var new_input = $(`<input class="upload-image" type="file" style="display: none;">`);
+      input_area.append(new_input);
+    }
+    $(`.items-sell-container__dropzone${inputs_length - 1}`).attr('class',`items-sell-container__dropzone${inputs_length}`);
+    //変更されたidに対応するimg-viewを取得
+    var image_view = $(".img-view[data-image="+changed_id+"]").first();
+    //idに対応するimg_viewが存在しないときは追加
+    if(!image_view[0]) {
+      image_view = $(`<div class = "img-view">
+                        <img>
+                        <div class="btn-wrapper">
+                          <div class="btn-edit">編集</div><!--
+                          --><div class="btn-delete">削除</div>
+                        </div>
+                      </div>`);
+      preview.append(image_view);
+    }
+    // プレビュー画像の表示をラベル要素の前に移動させる
+    $('.dropzone-box').before($('.img-view'))
+    //input,image_viewそれぞれにindexを再割り当て
+    reorder_data_image();
+    // アップロードされた画像ファイル(ファイルオブジェクト)の属性値(filesプロパティ)を取得する
+    var file = changed_input.prop('files')[0];
+    // FileReaderオブジェクトをインスタンス化する
+    var reader = new FileReader();
+    // ファイル読み込み後の処理
+    reader.onload = function(e) {
+      // img_view内のimgタグのsrcプロパティへ、読み込みが完了した画像を入れ込む
+      image_view.find('img').attr('src', e.target.result);
+    };
+    // FileReaderオブジェクトへ属性値(filesプロパティ)を代入する
+    reader.readAsDataURL(file);
+  });
+  // data-imageをの番号を再割り当てする
+  function reorder_data_image() {
+    //input,image_viewそれぞれにindexを再割り当て
+    $('[type="file"]').each(function(index, input) {
+      $(input).attr({
+        'data-image': index,
+        id: 'upload-image-' + index,
+        name: 'item[item_images_attributes][' + index + '][image]',
+      });
+      $(input).prop('disabled', index >= 10);
+    })
+    $('.img-view').each(function(index, image) {
+      $(image).attr('data-image', index);
+    });
+    //dropzone-boxに対応付くinputを末尾のinputに再割り当て
+    $('.dropzone-box').attr('for','upload-image-' + ($('[type="file"].upload-image').length - 1));
+    $('.items-sell-container__dropzone' + ($('[type="file"].upload-image').length)).attr('class', 'items-sell-container__dropzone' + ($('[type="file"].upload-image').length - 1));
+  }
+  // 編集後のデータ送信
   $('.edit_item').on('submit', function(e) {
     e.preventDefault();
@@ -164,8 +486,6 @@
     }
     $.ajax({
       url: '/items/' + gon.item.id,
@@ -182,27 +502,31 @@
   });
-});
+});
-```
+```
-登録済み画像が2枚ある状態で、新規画像を追加した際の
-params[:item][:item_images_attributes]の中身
+params全体
 ```Terminal
-<ActionController::Parameters {"0"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fb9bea614c0
- @tempfile=#<Tempfile:/var/folders/2g/j8x_fnq55gx4s21hb925hfcr0000gn/T/RackMultipart20191111-26990-8nvacq.jpg>,
-@original_filename="9.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"item[item_images_attributes][0][image]\";
-filename=\"9.jpg\"\r\nContent-Type: image/jpeg\r\n">, "id"=>"173"}, "1"=>{"id"=>"176"}} permitted: false>
-```
+[1] pry(#<ItemsController>)> params
+=> <ActionController::Parameters {"utf8"=>"✓", "_method"=>"patch", "authenticity_token"=>"1yaPCT8BvWJWGYnz/aqP2lh4Hdq5X/dA9Fn60xVmcwB94b4H0J/WarKft/GqSBkmeWw649eINI1xvYOkSpqkZg==",
+"item"=>{"item_images_attributes"=>{"0"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fb9be21b8d8 @tempfile=#<Tempfile:/var/folders/2g/j8x_fnq55gx4s21hb925hfcr0000gn/T/RackMultipart20191112-26990-i8yvzd.jpg>,
+@original_filename="9.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"item[item_images_attributes][0][image]\"; filename=\"9.jpg\"\r\nContent-Type: image/jpeg\r\n">, "id"=>"173"},
+"1"=>{"id"=>"176"}}, "name"=>"取り引い", "description"=>"テスト", "category"=>"メンズ", "category_id"=>"156", "item_state_id"=>"3", "deliver_expend_id"=>"1", "deliver_method_id"=>"3", "prefecture_id"=>"2", "deliver_day_id"=>"3", "amount"=>"456789"},
+"registered_images_ids"=><ActionController::Parameters {"ids"=>["173", "176"]} permitted: false>, "controller"=>"items", "action"=>"update", "id"=>"1"} permitted: false>
+```
 ### 試したこと