画像投稿プレビュー機能

はじめに

プログラミング初心者です。
温かく見守ってください。

画像投稿プレビュー機能

画像投稿を以前実装しました。
これにプレビュー機能を実装したいと思います。

事前準備

まずはJavaScriptが読み込まれるようにします。
・appディレクトリ→JavaScript内にprevire.jsのファイルを作成します。
・config/importmap.rb

pin "preview", to: "preview.js"

・app/javascript/application.js

import "preview"

コードを実際に書きます

const preview = () => {
  // 新規投稿・編集ページのフォームを取得
  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');
    previewImage.setAttribute('src', blob);

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

window.addEventListener("turbo:load", preview);
window.addEventListener("turbo:render", preview);

ここで個人的ポイント
１、画像を選択した後に、選択し直すとき
　古い方の画像はプレビューに残ったまま、新しく選択しなおした方もプレビューに表示されてしまうので、そんな時は　

// 古いプレビューが存在する場合は削除
   const alreadyPreview = document.querySelector('.preview');
   if (alreadyPreview) {
     alreadyPreview.remove();

こちらを追記します。

２、何らかが原因でエラーになり、再入力が必要になった際のもプレビューが表示されるようにしなければなりません。

const preview = () => {

省略

};

window.addEventListener("turbo:load", preview);
window.addEventListener("turbo:render", preview);

previewという関数に置き換えて、一番最後に呼び出す時にrenderで画面が飛んだ時もプレビューが表示されるようにしました。

以上