[JS][Rails]プレビュー付き画像アップロードで画像枚数に制限をかけよう！！

     = form_with(model:@item, locale: true , id: 'new_item') do |f|
        .item-image-container
          = f.label :"出品画像"
          %span.form-require 必須
          %p.item-image-container__lead
            最大5枚までアップロードできます
          .item-image-container__unit
            = f.fields_for :item_images do |i|
              %ul

              .item-image-container__unit--guide
                %label(for="image-label")
                  = i.file_field :image, multiple: true, class: 'image-upload-dropfile-hidden', id:"image-label",type: 'file', name: "item_images[image][]"
                  %div.image-upload-dropfile-entire
                  .have-image
                    = icon('fas','camera')
                    %p#d-d-delete ドラッグ&ドロップ
                    %p#click-delete またはクリックしてファイルをアップロード

$(function(){
  //DataTransferオブジェクトで、データを格納する箱を作る
  var dataBox = new DataTransfer();
  //querySelectorでfile_fieldを取得
  var file_field = document.querySelector('input[type=file]')
   //fileが選択された時に発火するイベント
   $('#image-label').change(function(){
    //選択したfileのオブジェクトをpropで取得
    var files = $('input[type="file"]').prop('files')[0];

    $.each(this.files, function(i, file){
      //FileReaderのreadAsDataURLで指定したFileオブジェクトを読み込む
      var fileReader = new FileReader();
      //DataTransferオブジェクトに対して、fileを追加
      dataBox.items.add(file)
      //DataTransferオブジェクトに入ったfile一覧をfile_fieldの中に代入
      file_field.files = dataBox.files

      //Fileオブジェクトを読み込む
      fileReader.readAsDataURL(file);

      //読み込みが完了すると、srcにfileのURLを格納
      fileReader.onloadend = function() {
        var src = fileReader.result
        var html =  `<li class="item-image-container__unit--preview" >
                      <div class="item-image-container__unit--caption">
                        <img src="${src}">
                      </div>
                      <div class="image-option">
                        <div  class="image-option__list">
                          <div class="image-option__list--tag">編集</div>
                        </div>
                        <div class="image-option__list">
                          <a class="image-option__list--tag">削除</a>
                        </div>
                      </div>
                    </li>`
        //ulタグの下にhtmlをappendしています。
        $(html).appendTo(".item-image-container__unit ul").trigger("build");

      };
      //DataTransfer構造のデバッグ
      console.log(dataBox);
    });

  });
});

if(dataBox.items.length > 4){
   return false;
}