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をかけたいのですが、理解不足の為に実装ができなかったので、どこかで実装できればなと思っています。
あと、久しぶりの投稿でちょっと緊張しました...笑
この記事が気に入ったらサポートをしてみませんか?