【Ruby on Rails】CarrierWaveの使い方

こんにちは、nishi_talk(@nishi_talk)です。
Railsの入力画面に画像を挿入したいときがあるかと思います。
今回は画像をアップロードできるgem「CarrierWave」の使い方をご紹介します。
そうなった時の対処方法をご紹介します。

今回使用する「carrierwave」の公式サイトはこちら。
ドキュメントなどは本家を参考にしてください。

公式サイト

gemのインストール

Gemfileにcarrierwaveの記述を追加します。

gem 'carrierwave'

記述を追加したら、bundle installを実行。

$ bundle install

uploaderを作成

無事にインストールが実行されたら、以下のコマンドを実行してuploader用のrubyファイルを作成します。

$ rails g uploader image

app/uploaders/image_uploader.rbが作成されます。
こちらのファイルで、画像アップロード時のもろもろ設定を記述します。
基本的に自分が使用したい箇所のコメントアウトを外すだけでOK。

class ImageUploader < CarrierWave::Uploader::Base
  # リサイズしたり画像形式を変更するのに必要
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  # アップロードできる拡張子を制限
  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  def filename
    "something.jpg" if original_filename
  end
end

画像用のカラムを追加

画像の登録用にカラムを追加します。
例えば、ユーザーのアイコンだったり、投稿のアイキャッチだったりの場合はそれぞれ該当するモデルにカラムを追加します。
※今回はuserモデルに追加を想定

$ rails g migration add_image_to_user image:string

モデルに追加

app/model/user.rb

class User < ApplicationRecord
	mount_uploader :image, ImageUploader
end

permitに画像の記述を追加

ユーザー情報を登録するコントローラーのpermitにimage（:image）を追加します。
それぞれの環境にあわせて記述してください。

app/controllers/controller.rb

params.permit(:id, :name, :image)

## 入力側
最後に登録するViweにファイルアップロードの入力項目を追加します。
※今回はuserの編集画面を想定

app/views/users/edit.rb

<%= f.label :顔画像 %>
<%= f.file_field :image %>

表示側
最後に、表示させたい箇所に以下を記述します。

app/views/users/show.rb

<img src="<%= @user.image %>" width="100">