CarrierWaveを使った画像のアップロード機能作成について

Ruby on Rails

目次

CarrierWaveの導入方法

画像のアップロード機能を作成したい時はCarrierWaveという便利なgemを使うと比較的簡単に実装できる。

導入のためには以下のをgemfileに記述し、実行。

gem 'carrierwave'

実装方法

まず、アップローダーを作成。そのためには以下を実行。

rails g uploader Image

すると、アップローダーファイル（/uploaders/image.rb）が出来上がるので、以下記述。

class ImageUploader < CarrierWave::Uploader::Base
  # アップロードした画像の保存先パスを指定
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  # デフォルト画像の設定
  def default_url
    'ファイル名.jpgなど'
  end
end

次に画像のカラムを設定。例えば、投稿データを扱うpostsテーブルがあった場合、imageカラムを作成するマイグレーションファイルを作成し、実行。（注意：あくまで、画像名のカラムなので、string型等にする） 

rails g migration AddImageToPosts image:string

ただし、これだけではダメで、アップローダーを使いますよ！という宣言をする必要がある。

そのためにはPostモデルに以下を記述。

class Board < ApplicationRecord
  mount_uploader : image, ImageUploader
  # 以下省略
end

コントローラーの実装。今回は単純な画像登録だけの場合。

class PostsController < ApplicationController
  def new
    @post = Post.new
  end
           　　         

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to posts_path, success: '投稿しました'
    else
      flash.now[:danger] = '投稿失敗'
      render :new
    end
  end
　　
  private
　　　
  def post_params
    params.require(:post).permit(:image)
  end
end

最後に、view側でデータを渡すためのフォーム実装。

<%= form_with model: @post, local: true do |f| %>
  <%= f.label :image %>
  <%= f.file_field :image %>
  <%= f.submit class: 'btn' %>
<% end %>

これで、データのアップロード機能実装は完了！

アップロードした画像の表示方法

image_tageに以下のような記載をすればOK！

<%= image_tag @post.image.url %>
ちなみに、このコードについては単純に画像を出力するだけでなく、画像の有無の判定をしてくれる。

言い換えると、@post.imageが存在すればその画像を、なければ設定したデフォルト画像を出力のように、条件分岐も含めたコードを１行で実現している（ありがたい）

その他：画像の形式を制限したい時

CarrierWaveには便利機能がいくつかあるが、例えばファイルの種類を制限したい時。

具体的にはjpgとpngだけにしたい、みたいな場合。

アップローダーファイルに以下を記述すればOK！

class ImageUploader < CarrierWave::Uploader::Base
  def extension_whitelist
    %w(jpg png)
  end
end