画像のプレビュー機能

はじめに

画像投稿時に、画像ファイルの名前だけが表示されるだけで、きちんと出来ている分かりづらいと感じたので、プレビュー機能を実装しました。

プレビュー機能実装前

##1.準備
1. プレビュー機能を実装させるためのjsファイルを作成する。app/javascript/packsにpreview.jsを作成
→ app / javascript / packs / preview.js

2.preview.jsを読み込めるようapplication.jsを編集する。

app/javascript/packs/application.js

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

3.viewファイルに画像が表示される場所を指定する。

views/ideas/new.html.erb

<div class="img-upload">
  <div class="left-img-upload">
    <div class="weight-bold-text">
      関連画像(関連する画像があれば添付してください)
    </div>
    <div class="click-upload">
      <p>クリックしてファイルをアップロード</p>
      <%= f.file_field :image, id:"idea-image" %>
    </div>
  </div>
  <div class="right-img-upload">
    <div id="image"></div>  <!--追記する-->
  </div>
</div>

##2.プレビュー機能実装
1 で作成したpreview.jsにプレビュー機能のコードを記述する。

app/javascript/packs/preview.js

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('image');

    const createImageHTML = (blob) => {
       // 画像を表示するためのdiv要素を生成
      const imageElement = document.createElement('div');
      // 表示する画像を生成
      const blobImage = document.createElement('img');
        blobImage.className="preview"; //←createElementで生成したimgにクラス名を付けている
      blobImage.setAttribute('src', blob);
      // 生成したHTMLの要素をブラウザに表示させる
      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement);
    };
    document.getElementById('idea-image').addEventListener('change', function(e){
      // 画像が表示されている場合のみ、すでに存在している画像を削除する
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }
      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

**最後にCSSで画像のサイズを指定する。**

.preview {
  height: 250px;
  width: 250px;
  object-fit: contain;
}

##実装完了
画像が表示されるようになったおかげで、自分が選択した画像が分かりやすくなりました。

##最後に
javascriptを用いた実装はあまり行っていなかったため、いい復習となりました。
また、createElementで生成した要素にクラス名をつける方法など学ぶことができ、勉強になりました。