JavaScriptを利用した複数画像投稿機能で、画像にうまく番号が付けられない！

Question

前提

ミニアプリを作っておりまして、現在は画像投稿機能の部分において、複数画像を投稿できるような機能を作っているところです。

実現したいこと

• プレビュー表示において、JavascriptにおけるNumberオブジェクトでプレビュー画像に番号をつけたい。

発生している問題

新しく選択した画像に番号は付けられていますが、全ての画像が同じ番号になっている状態です。

// file_fieldを生成・表示する関数
  const buildNewFileField = () => {
    // 2枚目用の画像選択ボタンを作成
    const newImageFile = document.createElement('p');
    newImageFile.innerHTML = "画像を選択する";
    // 2枚目用のfile_fieldを作成
    const newFileField = document.createElement('input');
    newFileField.setAttribute('class', 'hidden');
    newFileField.setAttribute('type', 'file');
    newFileField.setAttribute('name', 'learn[images][]');

    // 最後のfile_fieldを取得
    const lastFileField = document.querySelector('input[class="hidden"][type="file"][name="learn[images][]"]:last-child');
    // nextDataIndex = 最後のfile_fieldのdata-index + 1
    const nextDataIndex = Number(lastFileField.getAttribute('data-index')) +1;
    newImageFile.setAttribute('data-index', nextDataIndex);
    newFileField.setAttribute('data-index', nextDataIndex);

    // 追加されたfile_fieldにchangeイベントをセット
    newImageFile.addEventListener("change", changedFileField);
    newFileField.addEventListener("change", changedFileField);

    // 生成したfile_fieldを表示
    const fileFieldArea = document.querySelector('.click-upload');
    fileFieldArea.appendChild(newImageFile);
    fileFieldArea.appendChild(newFileField);
  };

「最後のfile_fieldを取得」で画面に表示されている画像選択ボタンの情報を取得し、その後で新しい画像と画像選択ボタンに新しい番号をつけるように記述しているつもりでした。

// プレビュー画面を生成・表示する関数
  const buildPreviewImage = (dataIndex, blob) =>{
    // 画像を表示するためのdiv要素を生成
    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');
    previewWrapper.setAttribute('data-index', dataIndex);

    // 表示する画像を生成
    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    previewImage.setAttribute('src', blob);

    // 生成したHTMLの要素をブラウザに表示させる
    previewWrapper.appendChild(previewImage);
    previewList.appendChild(previewWrapper);
  };

上記の6行目のように画像にも「data-index」を付与しています。

問題発現までの流れ

新規投稿する際に、今までの機能では画像を選択したところでプレビュー画像が現れない仕様でした。
そこで、まずは画像一枚のみ現れるように新しくpreview.jsを作り、そこにコードを記述しました。
その後に複数画像を投稿できるようにまずは一枚目の画像を選択すると２枚目専用の画像選択ボタンが現れるようにしました。次に２枚目の画像が選択されると、その画像が現れるようにしました。その時に、現れた画像に番号をつけ、画像の変更・削除に対応するようにしましたが、ブラウザの検証で見てみると、それぞれの画像にはdata-index（※画像に番号をつけるための変数）が振り分けられているのに、全ての画像の番号が0（最初の番号）になっている状態になりました。
ちなみに画像選択ボタンの方はそれぞれしっかりと0番から順番に振り分けられていましたので、そこは問題ありませんでした。

試したこと

data-indexがどこに紐づいているか、抜けているところはないかチェックしてみた。

補足情報

念の為、ファイル全体をここに掲載します。

document.addEventListener('DOMContentLoaded', function(){
  // 新規投稿・編集ページのフォームを取得
  const learnForm = document.getElementById('new_learn');
  // プレビューを表示するためのスペースを取得
  const previewList = document.getElementById('previews');
  // 新規投稿・編集ページフォームがないならここで終了
  if (!learnForm) return null;

  // プレビュー画面を生成・表示する関数
  const buildPreviewImage = (dataIndex, blob) =>{
    // 画像を表示するためのdiv要素を生成
    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');
    previewWrapper.setAttribute('data-index', dataIndex);

    // 表示する画像を生成
    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    previewImage.setAttribute('src', blob);

    // 生成したHTMLの要素をブラウザに表示させる
    previewWrapper.appendChild(previewImage);
    previewList.appendChild(previewWrapper);
  };

  // file_fieldを生成・表示する関数
  const buildNewFileField = () => {
    // 2枚目用の画像選択ボタンを作成
    const newImageFile = document.createElement('p');
    newImageFile.innerHTML = "画像を選択する";
    // 2枚目用のfile_fieldを作成
    const newFileField = document.createElement('input');
    newFileField.setAttribute('class', 'hidden');
    newFileField.setAttribute('type', 'file');
    newFileField.setAttribute('name', 'learn[images][]');

    // 最後のfile_fieldを取得
    const lastFileField = document.querySelector('input[class="hidden"][type="file"][name="learn[images][]"]:last-child');
    // nextDataIndex = 最後のfile_fieldのdata-index + 1
    const nextDataIndex = Number(lastFileField.getAttribute('data-index')) +1;
    newImageFile.setAttribute('data-index', nextDataIndex);
    newFileField.setAttribute('data-index', nextDataIndex);

    // 追加されたfile_fieldにchangeイベントをセット
    newImageFile.addEventListener("change", changedFileField);
    newFileField.addEventListener("change", changedFileField);

    // 生成したfile_fieldを表示
    const fileFieldArea = document.querySelector('.click-upload');
    fileFieldArea.appendChild(newImageFile);
    fileFieldArea.appendChild(newFileField);
  };

  // input要素で値の変化が起きた際に呼び出される関数の中身
  const changedFileField = (e) => {
    // data-index(何番目を操作しているかを取得)
    const dataIndex = e.target.getAttribute('data-index');
    console.log(dataIndex);

    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);

    buildPreviewImage(dataIndex, blob);
    buildNewFileField();
  };

  // input要素を取得
  const fileField = document.querySelector('input[type="file"][name="learn[images][]"]');
  
  // input要素で値の変化が起きた際に呼び出される関数
  fileField.addEventListener('change', changedFileField);
});

対象のhtmlコードを追記します。

<%= form_with model: @learn, id: 'new_learn', local: true do |f| %>
<div class="learn-form-group">
  <div class="weight-bold-text">
    タイトル
    <span class="indispensable">必須</span>
  </div>
  <%= f.text_area :title, class:"learns-title", id:"learn-title", placeholder:"40文字まで", maxlength:"40" %>
</div>

<div class="learn-form-group">
  <div class="weight-bold-text">
    説明文
  </div>
  <%= f.text_area :description, class:"learns-description", id:"learn-info", placeholder:"1000文字まで", maxlength:"1000" %>
</div>

<div class="learn-form-group">
  <div class="weight-bold-text">
    教科
    <span class="indispensable">必須</span>
  </div>
  <%= f.collection_select(:subject_id, Subject.all, :id, :name, {}, {class:"select-box", id:"learn-subject"}) %>
</div>

<div class="learn-form-group">
  <div class="weight-bold-text">
    学習時間
  </div>
  <div class="learns-time">
    <div class="time-form">
      <%= f.text_field :study_hour, class:"learn-time", id:"study-hours" %><span>時間</span>
    </div>
    <div class="time-form">
      <%= f.text_field :study_minutes, class:"learn-time", id:"study-minutes" %><span>分</span>
    </div>
  </div>
</div>

<div class="learn-form-group">
  <div class="image-title">
    画像
  </div>
  <label class="form-image">
    <div id="previews"></div>
    <div class="click-upload">
      <p>
        画像を選択する
      </p>
      <%= f.file_field :image, name: 'learn[images][]', class: "hidden", data: {index: 0} %>
    </div>
  </label>
</div>

<div class="learn-post-btn">
  <%= f.submit "記録する", class:"post-btn" %>
</div>
<% end %>

恐縮ですが、ご回答していただける方お待ちしております。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、data-index に与えられる番号はインクリメントされていました。つまり、問題が再現しませんでした。

おそらく、ご提示の部分には原因はなさそうに思います。
ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。

問題再現の手順をもう少し詳しく書いていただけますか？

Answer 1

HTMLをご提示いただいていないので、想像で補って回答します。

	<div id="new_learn"></div>
	<div id="previews"></div>
	<div class="click-upload">
		<input type="file" name="learn[images][]" class="hidden" data-index="0">
	</div>

↑これでは問題が再現しませんでした。
↓これですと問題が再現しました。

	<div id="new_learn"></div>
	<div id="previews"></div>
	<div>
		<input type="file" name="learn[images][]" class="hidden" data-index="0">
	</div>
	<div class="click-upload">
	</div>

つまり、input[class="hidden"][type="file"][name="learn[images][]"]:last-childが複数存在するようなHTML構造になっているのではないかな？　と想像します。

Comments

[Mikoto]

ご回答ありがとうございます。説明不足でしたので、質問の方に説明を追記いたしました。ご確認よろしくお願いいたします。

[Mikoto]

ご回答いただいた内容に関しては、他のファイルに同じ記述をしている場合も同様な問題が起きるということでしょうか？

[Lhankor_Mhy]

ご提示のHTMLを試してみましたが、#new_learnが存在しないため、
if (!learnForm) return null;
で早期リターンしているようです。

実際に試しているHTMLとは異なるのではないかな、と思います。

コードは、それだけで問題が再現するのか一度お試しになってからご提示いただいた方が、お互いに時間の無駄がなくなるのではないかな、と思います。

[Mikoto]

ご返信ありがとうございます。

new_learnが存在していないということについては、対象のhtmlのコードの先頭にあるform_with内のidとして設定しておりました。掲載していなかったこと、申し訳ありません。質問フォームにhtmlのコードを全体に変更致しましたのでご確認よろしくお願いいたします。

また、input[class="hidden"][type="file"][name="learn[images][]"]:last-child　が複数存在するということについても気になりましたので、部分テンプレートを用いてnewアクションとeditアクションのテンプレートを統一しましたが、結果は変わりませんでした。

以上を踏まえて、恐縮ですがご確認よろしくお願いいたします。

[Lhankor_Mhy]

Ruby は全くわからないので、erb形式のテンプレートはちょっと苦戦します。

[Lhankor_Mhy]

試してみましたが、やはり問題が再現しませんでした。

[Mikoto]

分かりました。お手数をおかけいたしまして申し訳ありません。
ここまでご対応いただき、ありがとうございます。