【JavaScript】プレビュー機能の実装

特徴

・画像を選択するとプレビュー画像が表示される
・画像は何度も選び直すことができプレビュー画像もその度変わる

手順

■HTML側の編集

❶画像投稿ページのHTMLにプレビュー画像を表示するスペースを作成

<div id="previews"></div>

■JavaScript側の編集

❷preview.jsを作成して読み込むよう設定

app/javascriptの中にpreview.jsを作成

app/javascript/packs/application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require('../preview')  // 追記する

❸preview.jsの編集

①画像投稿ページのフォームを取得

②今記述したプレビュー画像を表示するスペースのHTML要素を取得

③条件分岐で、画像投稿ページのフォームでないなら処理を終了するように設定

④選択した画像情報に取得

input要素（画像が入るところ）の値に変更があった場合、関数を発火させる
値の変更があった要素から、画像の情報を取得する
取得した画像情報のURLを生成する

⑤取得した画像情報をブラウザへ表示するために、HTML要素をJavaScript側で生成

⑥setAttributeメソッドを用いて生成したimg要素のsrc属性へ変数blobを設定

⑦作成したHTMLの要素をブラウザに表示

⑧画像を選択し直したら古いプレビューは削除されるようにする

app/javascript/preview.js

document.addEventListener('DOMContentLoaded', function(){
  // ①画像投稿ページのフォームを取得
  const postForm = document.getElementById('new_post');
  // ②プレビューを表示するためのスペースを取得
  const previewList = document.getElementById('previews');
  // ③画像投稿ページのフォームがないならここで終了。「!」は論理否定演算子。
  if (!postForm) return null;

  // ④input要素を取得
  const fileField = document.querySelector('input[type="file"][name="post[image]"]');
  // input要素で値の変化が起きた際に呼び出される関数
  fileField.addEventListener('change', function(e){
    // ⑧古いプレビューが存在する場合は削除
    const alreadyPreview = document.querySelector('.preview');
    if (alreadyPreview) {
      alreadyPreview.remove();
    };
    //
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);
    // ⑤画像を表示するためのdiv要素を生成
    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');
    // 表示する画像を生成
    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    // ⑥setAttributeメソッドを用いて生成したimg要素のsrc属性へ変数blobを設定
    previewImage.setAttribute('src', blob);

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