ActiveStorgaeによる画像アップロード時に他の項目がバリデーションエラーになって画像の指定が外れてしまうのを回避したい

方針

ActiveStorageのダイレクトアップロードを使う。

バリデーションでレコードができていなくても、画像だけは先にアップロードされているという仕組み。

方法

1. ActiveStorageで画像アップロードができるところまで実装。

code: Gemfile

+ gem 'image_processing', '>= 1.2'

+ gem "mini_magick"

2. @rails/activestorage - npmの Direct uploadsの項目を参照。

3. activestorageのライブラリを導入。

code: config/importmap.rb

+ pin '@rails/activestorage', to: 'activestorage.esm.js'

code:app/javascript/controllers/application.js

+ import * as ActiveStorage from "@rails/activestorage"

+ ActiveStorage.start()

code: app/views/hoge/_form.html.erbb

<%= form.file_field :picture, onchange: "loadImage(this);", id: "file_button", direct_upload: true %>

4. バリデーションエラー時のファイル指定が消えないようにする

5. サードパーティへのアップロードをする場合は、RailsGuideを参照

参考