【Rails/JavaScript】アクティブストレージの画像をプレビュー表示させるときに出会ったエラー

はじめに

アクティブストレージの画像をプレビュー表示させるときに出会ったエラーについてその解決法をまとめました。

プレビュー表示の方法

これは色々な記事でまとめてましたのでこちらの記事を参照。

出会ったエラー

①Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')at HTMLDocument.

Javaのファイル内容を以下のように書いたときにローカル環境にて確認時にコンソールに表示されたエラーです。

document.addEventListener('DOMContentLoaded', function(){
  const orderForm = document.getElementById('item-image');
  const previewList = document.getElementById('previews');
  if (!orderForm) return null;
  console.log("preview.jsが読み込まれました");
  const fileField = document.querySelector('input[type="file"][name="post[image]"]')
  fileField.addEventListener('change', function(e){
   console.log("input要素で値の変化が起きました");
   // console.log(e.target.files[0]);
  });
});

7行目の

const fileField = document.querySelector('input[type="file"][name="post[image]"]')

この部分でエラーが発生していました。
エラーを翻訳すると、「プロパティを読み取れません (「addEventListener」の読み取り)HTMLDocument.」となっており、要素が見つからないといっているようです。

改めてコードを確認すると、[name="post[image]　の要素名の指定が間違っていそうです。

ブラウザの検証機能を使いname要素の名前を改めて確認します。

やはり要素の名前name="item[image]"となっていました。
jsファイルの記述を

 const fileField = document.querySelector('input[type="file"][name="item[image]"]')

としたら無事にエラー解決です。

その後参照記事通りに編集すれば、実装完了！
お疲れさまでした。

document.addEventListener('DOMContentLoaded', function(){
  const orderForm = document.getElementById('item-image');
  const previewList = document.getElementById('previews');
  if (!orderForm) return null;

  const fileField = document.querySelector('input[type="file"][name="item[image]"]')
  fileField.addEventListener('change', function(e){
   const alredyPreview = document.querySelector('.preview');
   if (alredyPreview) {
    alredyPreview.remove();
   };
   const file = e.target.files[0];
   const blob = window.URL.createObjectURL(file);
   const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');
   const previewImage = document.createElement('img');
   previewImage.setAttribute('class', 'preview-image');
   previewImage.setAttribute('src', blob);

   previewWrapper.appendChild(previewImage);
   previewList.appendChild(previewWrapper);
  });

});