画像投稿機能を改善する（プレビュー機能をつけよう）

完成した某フリマアプリに画像投稿機能の改善をしました。
プレビュー機能と、実際に見た時に画像のサイズがバラバラだったので、画像サイズを統一できるように設定しました。

document.addEventListener('DOMContentLoaded', function(){

  const itemForm = document.getElementById('new_item');

  const previewList = document.getElementById('previews');
 
  if (!itemForm) return null;


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

  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);

    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');

    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    previewImage.setAttribute('src', blob);
    previewImage.classList.add('preview-size'); ←ここが画像サイズの調整です。

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

さらに、items/newのcssに

.preview-size{
  height: 150px;
  width: auto;
}

を足しました。

あとは、

<div class="items-sell-contents">
  <header class="items-sell-header">
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), new_item_path %>

  </header>
  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>
    <%= form_with model: @item,  id: 'new_item',local: true do |f|%> ←idをつけたし


    <%= render 'shared/error_messages', model: f.object %>

    <%# 商品画像 %>
    <div class="img-upload">
          
      <div class="weight-bold-text">
        商品画像
        <span class="indispensable">必須</span>
      </div>
     
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
   <div id="previews"></div>　　←この一文をつけたし
        <%= f.file_field :image, id:"item-image" %>
      </div>
    </div>
    <%# /商品画像 %>

以上です。
めでたし。