アップロードする画像にバリデーションを追加する

https://qiita.com/AttAtD/items/6b9502c0fa75531ee400
https://qiita.com/AttAtD/items/c2077d3bd3d0f1be3268
https://qiita.com/AttAtD/items/5bad43034dbb66c33e15
の続き

アップロードする画像にバリデーションを追加する。

サーバー側、クライアント側の両方でバリデーションを追加する。

クライアント側

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

  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