クライアント側

ファイルをアップロードする際のアクションにファイルの容量とファイル名のチェックを追加する

  readImage(e) {
    let input = this.inputTarget;
    let output = this.outputTarget;

    if (input.files) {
      let files = Array.from(input.files);

      //追加ここから
      let errors = []
      files = files.filter((f) => {
        if(f.size > 5 * 1024 * 1024) {
          errors.push(`5Mバイト以上のファイルはアップロードできません(${f.size} byte)`);
          return false;
        } else {
          return true;
        }
      });

      const stored = Array.from(data.files);
      files = files.filter((file) => {
        const index = stored.findIndex((f) => f.name == file.name);
        if (index != -1) {
          errors.push(`同じ名前のファイルはアップロードできません(${file.name} byte)`);
          return false;
        } else {
          return true;
        }
      });
      if(errors.length > 0) {
        alert(errors.join("\n"));
      }
      //追加ここまで

      files.forEach((f) => data.items.add(f));
      for (let i = 0; i < files.length; i++) {
        this.readOne(files[i], i, output);
      }
      input.files = data.files;
    }
  }

サーバー側

validation用にgemを追加する

Gemfile

gem 'active_storage_validations'

posts_controller.rb


class Post < ApplicationRecord
...

    validates :photos,
            content_type: { in: proc { |a| a.supported_content_types } }, # コンテンツの種類をチェックする
            size: { less_than: 5.megabytes }, # 5Mバイト未満のファイルだけ許容
    def supported_content_types
        %w[image/jpg image/jpeg image/png]
    end
...
end