【Rails5】Deviseのregistrations#editで画像をアップロードする

rails avatar upload devise

Deviseのインストールが済んでいて、registrations#editでユーザーの画像をアップロードしたいという時の流れです。アップローダーのライブラリはcarrierwaveを使っています。

環境はこちらです

準備

必要なgemはこちらです。

Gemfile

$ bundle install します。

DeviseはUserモデルだとして、そこにavatarカラムを追加します。

$ rails db:migrat します。

アップローダー

avatarのアップローダーを生成します。

アップローダーの内容は適宜変更してください。

app/uploaders/avatar_uploader.rb

モデルとアップローダーを紐づける

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/user.rb

ストロングパラメーターの追加

account_update_paramsにavatar, avatar_cache, remove_avatarを追加します。avatar_cacheはバリデーション時などに画像を保持するためで、remove_avatarは画像を削除する時のためのパラメーターです。

app/controllers/users/registrations_controller.rb

Views

user/registrations#editへのリンクを貼っておきます。

‘current_user’はサインインしているユーザーを取得するdeviseのヘルパーメソッドです。既存の画像がない場合は’no_avatar.png’という画像をあてています。

app/views/devise/registrations/edit.html.erb

CSS

アバター画像を正円にするために’border-radius’を50%にしています。画像の縦横比を保ちつつ中央にトリミングする方法は色々あるかと思いますが、’object-fit’プロパティーを使えば一行で済みます。

リダイレクト先

Deviseのアカウント情報を更新した後のリダイレクト先はデフォルトではroot_pathになっているかと思いますが、指定するには after_update_path_forを使います。

app/controllers/users/registrations_controller.rb

今回は以上です!続編では、アップロードした画像をすぐにプレビューできるようにjQueryを追加したいと思います!😊
アップロードした画像を即時プレビューする


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp