Cocoonで追加された画像にプレビューを表示したい（rails）

Question

いつもお世話になっております！

RailsのCocoonを使ってネスト化された画像を追加していきたいと思っているのですが、下記のJSプレビューですと、追加してでてきた項目のプレビューidがユニークでないため、2枚目以降のプレビューを表示させることができません。
追加されるアイテムにidを振ることができれば良いのですが、何か良いアイデアなどはございますでしょうか。

開発環境

• Ruby 2.4.0
• Rails 5.2.2
• Cocoon 1.2.12

apps/views/users/new.html.erb

・・・
      <div class="formImage">
        <h3>画像</h3>
        <%= f.fields_for :images do |m| %>
          <div id="links">
            <%= link_to_add_association "画像を追加", f, :images, partial: 'image' %>
          </div>
        <% end %>
      </div>
・・・

apps/views/user/_image.html.erb

<div class="nested-fields">
  <div class="input-file updateIcon">
    <div class="imgPreview">
      <%= f.file_field :image, type: "file", id: "imageFile", accept: "image/*" %>
    </div>
    <%= link_to_remove_association "Remove image", f %>
  </div>
</div>

<script data-turbolinks-eval="false">
  $("#imageFile").change(function() {
    if (!this.files.length) {
      return;
    }

    var file = $(this).prop("files")[0];
    var fr = new FileReader();
    $(".imgPreview").css("background-image", "none");
    fr.onload = function() {
      $(".imgPreview").css("background-image", "url(" + fr.result + ")");
    };
    fr.readAsDataURL(file);
    $(".imgPreview img").css("opacity", 0);
  });
</script>

Answer 1

cocoon の追加されるフォーム内でIDを取得できればというのは自分も思います

とりあえず cocoon で追加される view は JS にうめこまれる静的なものなので
その中で ID を指定するとかならず重複してしまい HTML 規約的にNGなので
<%= f.file_field :image, type: "file", class: "imageFile", accept: "image/*" %>
のように id は消すかクラスに変えるしかありません

その上で１つの解決方法は cocoon:after-insert を捉えてじぶんでユニーク ID を付与してしまう方法です

let counter = 0;

$(document).ready(function() {
    $('.formImage') // 
      .on('cocoon:after-insert', function(e, insertedItem) {
        $(insertedItem).find('.imageFile').attr('id', 'imageFile_' + counter++);
      })
  :

などとしておけば

$(".imageFile").change(function() {
  const id = $(this).attr('id');

で取り出すことができます

もう１つの解決方法は $(".imgPreview") とかいてしまうとドキュメント内すべてが対象になってしまうので
$(this).parent(".imgPreview")
に置き換えてスコープを自分の親にだけ限定することでも実現できるかと思います

どちらも実際にコードを動かしたわけではないので
文法ミス記述ミス等あったらごめんなさい

Comments

[yamady]

myptさま、ご回答いただきましてありがとうございます！
非常に参考になりました。
Cocoonのドキュメントにもちゃんと書いてありましたね。。

なんとかそれぞれのCocoonにidを付与することに成功いたしました！
ですが、下記の部分が反応しないのですが、、
JSの書き方に問題ありますかね（汗）

$("#imageFile_" + counter++).change(function() {
if (!this.files.length) {
return;
}

[mypt]

counter++　は常に変化し続けるので作ったのと別のIDになってると思います

あと cocoon の中に JS を書くと静的な同じIDしかかけないので
- cocoon:after-insert で追加される<script>内のJSのIDの値も書き換える
- JSはnew側においてIDは動的に習得する
のどちらかが必要になると思います

イベントを捉えるのはあくまで全クラス $(".imageFile") にしておいて
とらえたイベントの中でIDを取得してどのファイルフィールドが発火したか識別する必要があります

やりたいことはファイルフィールドのイベントを捉え
.imgPreview のCSSを捉えることなので
.on('cocoon:after-insert', function(e, insertedItem) {
const id = 'imgPreview_' + counter++;
// .imageFile の target 属性に対応する .imgPrevies の #id をうめこむ
$(insertedItem).find('.imageFile').data('target', "#" + id);
// .imgPreview に ID を設定する
$(insertedItem).find('.imgPreview').attr('id', id);
}
のように imageFile に対応する imgPreview のIDをうめこんでおいて
.imageFile が change したらそのターゲットを取り出してターゲットのCSSを変化させる
というようなコードになると思います
(bootstrap でよく使われる方法)

イベント発火時のコードは
$(".imageFile").change(function() {
// .imageFile (= $this) にセットしてあるターゲット属性を取り出す
const target = $(this).data('target');
// ターゲット(.imgPreview の #id 文字列)から.imgPreview のCSSを変化させる
$(target).css("background-image", "none");
}

のような感じでしょうか

[yamady]

詳しい説明をいただきまして、ありがとうございます。
精査してトライしてみたいと思います！