[即席]Railsの複数画像投稿に枚数制限をつけたい！

はじめに

本日、ポートフォリオ作成中に、「あ、複数画像投稿の枚数の制限をかけたいな〜」と思い調べたのですが、あまり「これだ！」と思える記事に出会えなかったので、私なりに簡単に楽に実装できる方法を考えてみたのでここでアウトプットします。もしかしすると、かなり脆弱性のある実装かもしれませんが、そこは個々のご判断でお願いいたします。

結論

結論からいうと、添付したファイル数が基準を超えたときに、アラートを出して投稿（更新）ボタンを非活性化してしまうということです。

以下に具体的なコードを貼っておきます.
実言うと、これはプレビュー機能実装で使ったコードなんですけどね、、、

preview.js

document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('practice-views');
  const submit=document.getElementById("submit"); //更新ボタンの取得
//ファイル選択をしたときに以下を発火
  document.getElementById('practice_image').addEventListener('change', (e)=>{　
    while(ImageList.lastChild){
      ImageList.removeChild(ImageList.lastChild);//ここは気にしなくてOKです
    }
   });
  document.getElementById('practice_image').addEventListener('change', (e)=>{
    const files = e.target.files;
　　//以下で枚数制限をかけています。
    if(files.length>4){
      alert("投稿できる画像数は4枚までです");
      submit.setAttribute("disabled",true);　//非活性にする！！！！
      return false;
    }else{
      submit.setAttribute("disabled",false);//活性にする！！！！
    }
    Array.from(files).forEach(file => {
      const blob = window.URL.createObjectURL(file);
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class','preview_image' );  

       // 表示する画像を生成
       const blobImage = document.createElement('img');
       blobImage.setAttribute('src', blob);
       imageElement.appendChild(blobImage);
       ImageList.appendChild(imageElement);
    });
  });
});

とりあえず、ここに着目してくださればわかるかと思います。

preview.js

document.getElementById('practice_image').addEventListener('change', (e)=>{
    const files = e.target.files;
　　//以下で枚数制限をかけています。
    if(files.length>4){
      alert("投稿できる画像数は4枚までです");
      submit.setAttribute("disabled",true);　//非活性にする！！！！
      return false;
    }else{
      submit.setAttribute("disabled",false);//活性にする！！！！
    }

イベントオブジェクトの中から、添付したファイルの情報をとってきてfilesに格納しています。そして、そのfiles.lengthで格納されているデータの数を見ているわけです。たったこれだけです！！！
ちなみにeturn false;にしているのは、画像枚数が制限つを超えた場合は後の処理をさせたくないからです。

おわりに

以上で、画像枚数の制限をかけることができました。
手軽に簡単に実装したい方は、この方法を是非検討してみてくださいね！