Devise の Profile 情報にアバターを追加する

前回までで Profile 情報を編集する基本ができたので、次に Profile 情報にアバターを追加していきます。
Rails 5.2.3 には、ActiveStorage があって、そちらでファイルのアップロードに対応可能ですが、今回は使いなれば CarrierWave を使って実装していきます。

CarrierWave の設定

CarrierWave gem のインストール

すでに Gemfile に CarrierWaev を指定してインストール済みの前提です。もしインストールしていない場合は、Gemfile に mini_magick と carrierwave を記載して install しておいてください。

アバター用 CarrierWave の設定

Profile の avatar 用のアップローダを作成します。

Profile モデルとの紐付けを実施

app/uploaders/profile_avatar_uploader.rb で、このアップローダに対する設定を行う

アップロードファイルがない場合のデフォルト画像の設定

CarrierWave の動作確認

コマンドラインで動作を確認します。現状、ファイルをアップロードしていないので、デフォルトのファイルパスが返ってきています。

アカウントの View の変更

ここまででデフォルトの画像の表示が可能となったので、アカウントの表示画面でアバターを表示するように変更します。
app/views/accounts/show.html.erb の <div class=”col-sm-4″> </div> で囲まれた部分にアバター表示を追記します。

こんな画面が見えるようになる(はず

アバターアップロード機能の追加

Profile.name と同様に DHH 流ルーティングでアバターアップロード機能を実装します。

コントローラの作成

Profile.name と同様に、コントローラを作成します。

以下のように編集します。

ルーティング設定

Profile.name と同様にルーティングを設定します。すでにルーティングは設定されていますが、これを削除して定義します。

アバターアップロード用の View を作成

CarrierWave の例によくあるように View を作成します。

accounts/avatars/edit を叩くと、このような画面が出てくると思います。そしてファイル選択してアップロードすればアカウント表示画面に戻ってアバターが切り替わっているはずです。

アカウント表示 View からアバターアップロードへのリンク作成

アカウント表示 View のアバターの下の「編集」に、作成したアバターアップロードへのリンクを付与します。

スタイル等の指定

あとは、ファイルアップロード前に確認可能な Javascript を適用したり、アバターを表示する際に画像のサイズを指定して centering して表示する CSS の設定を行ってください。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です