이미지 미리 보기 기능

입문

이미지 투고 시 이미지 파일의 이름만 표시하는 것은 이해하기 어려워서 미리 보기 기능을 설치했습니다.
미리보기 기능 설치 전

1. 준비

1. 미리 보기 기능을 위한 js 파일을 만듭니다.app/javascript/packs에서preview.js 만들기
→ app/javascript/packs/preview.js
2.preview.application.편집
app/javascript/packs/application.js

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

3. 뷰 파일에 이미지를 표시할 위치를 지정합니다.
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;
}

구현 완료

그림을 표시한 덕분에 자신이 선택한 그림을 이해하기 쉬워졌다.

마지막

자바스크립트를 잘 사용하지 않아서 복습이 잘 됐어요.
또한create Element에서 생성된 요소에 학급을 명명하는 방법을 배우는 등 많은 것을 배웠다.