Rails Action Textのvalidation的なものの紹介！

Railsでアプリを作成していて、Action Textを使っているのですが、添付する画像のバリデーションがうまくいかず悩んでいました。

そんな時、javascriptを用いて、画像のvalidation的なことができないかと、探しているところ見つけました！！！！！！

JavaScriptで画像のチェックの仕方

まず、app/javascript/packs/application.jsに下記の記述をします

app/javascript/packs/application.js

// action-textの設定用
import "../trix-editor-overrides"

次に、app/javascriptの配下に、trix-editor-overrides.jsを作成します

そして、先ほど作成した　trix-editor-overrides.js　に、このコードを書きます。

// app/javascript/trix-editor-overrides.js

window.addEventListener("trix-file-accept", function(event) {
 // 画像の拡張子をチェック
 const acceptedTypes = ['image/jpg', 'image/jpeg', 'image/png']
 if (!acceptedTypes.includes(event.file.type)) {
   event.preventDefault()
   alert("添付できる拡張子は、jpg、jpeg、pngのみです")
 }
 // 画像のbyte数をチェック
 const maxFileSize = 1024 * 1024 // 1MB 
 if (event.file.size > maxFileSize) {
   event.preventDefault()
   alert("アップできる画像は1MBまでです。")
 }
})

これで、完了です！！

画像の添付をしようとすると、ポップアップで警告が出て、添付がキャンセルされます。

下記のサイトを参考にさせて頂きました

https://blog.saeloun.com/2019/11/12/attachments-in-action-text-rails-6.html

外国の方、ありがとうございます😂

まとめ

本当はmodelでもvalidationをかけたいのですが、理解不足の為に実装ができなかったので、どこかで実装できればなと思っています。

あと、久しぶりの投稿でちょっと緊張しました...笑