LoginSignup
2
1

More than 1 year has passed since last update.

【carrierwave】deviseで作ったuserにプロフィール画像を割り当てる

Posted at

参考: https://zenn.dev/yukihaga/articles/e63a224431bc96
       : https://scrapbox.io/rails-beginners/Devise%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AB%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E7%94%BB%E5%83%8F%E3%82%92%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6%E3%82%8B(CarrierWave)

今、インスタみたいな(厳密には全然違うけど)アプリケーションを作っているんですが
投稿ポストにはactivestrageで画像ファイルを保存させているんですが、
「この手のサイトってアイコンとかプロフィール画像あるじゃん」ってことに気づいてしまい。後付けでuser登録時にimageを紐づけることに。

経験値が浅い私は
「active strageにuserもアソシエーションして、deviseのサインアップ画面に:imageを保存できるようにfilefield置けば行けるでしょ」ってぐらいの感覚でしたが案の定エラーが出たので、調べてavatarをつける【carrierwave】というgemを見つけました

使い方

code:Gemfile

 # 以下追加
 gem 'carrierwave'
 gem 'mini_magick'

ターミナル

bundle install
rails generate uploader Avatar

これでgemは入りました
アップローダーを設定します

app/uploaders/avatar_uploader.rb

 class AvatarUploader < CarrierWave::Uploader::Base
    def store_dir
      "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    end

    def default_url
      'sample.jpg'
    end
  
    def extension_allowlist
      %w(jpg jpeg gif png)
    end
  end
#他にコメントアウトされた何某がデフォルトで記述されてますが今回の実装では触らない。

.gitignore

  /public/uploads

↑この記述によってgitにimageを持って行かないようにします。

ターミナル(カラムを足す)

% rails g migration add_avatar_to_users avatar:string
% rails db:migrate

呼び出す時の色々

code:app/controllers/application_controller.rb

  before_action :configure_permitted_parameters, if: :devise_controller? # 追加
   # 以下追加
   protected
 
     def configure_permitted_parameters
   	  devise_parameter_sanitizer.permit(:sign_up, keys: [:avatar])
     end
 end

フォームの作成

  <div class="form-group">
    <%= f.label :avatar %>
    <%= f.file_field :avatar, class: 'avatar' %>
  </div>

一覧に表示

 <%= image_tag @user.avatar.url, class: 'user_avatar' %>

これでユーザーに紐づいたプロフィール画像を登録・表示する処理ができましたとさ。
まだまだ知らないフレームワーク多いね。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1