A Little Each Day

note to self

Railsでcarrierwaveを使って画像をアップロードする方法

こんにちは。本日はrailsで画像をアップロードする時によく使用されるcarrierwaveのインストール方法と使い方を説明したいと思います。

今回は基本的な使い方のみを説明します。

また後々、carrierwaveの便利な機能の使い方も説明したいと思っていますので、そちらも合わせて参考にしていただければ幸いです。

バージョン

Ruby '2.2.1'
Rails '4.2.1'


carrierwaveのインストール

まずcarrierwaveを使うためにGemfileに記述します。

# Gemfile

gem 'carrierwave'


インストール

$ bundle install


次に画像をアップロードするカラムの属性(今回はPostカラムのpicture属性)を以下のコマンドで指定します。

# ターミナル

$ rails g uploader Picture


すると以下のファイルが生成されます。

app/uploaders/picture_uploader.rb


以上でcarrierwaveのインストールは完了です。


カラムとmodelの修正

現段階でPostカラムが以下のようになっているとします。

属性
title string
content text


今回はPostカラムで画像をアップロードするので、アップロードした画像を収納するpicture属性をPostカラムに新たに作成します。

# ターミナル

$ rails g migration add_picture_to_posts picture:string


マイグレーション

# ターミナル

$ rake db:migrate


これでPostカラムは以下のように変更になりました。

属性
title string
content text
picture string


次に画像に関連付けるためにモデルを修正していきます。

carrierwaveをインストールするとmount_uploaderというメソッドが使えるようになります。

これは引数に(カラムの属性名, 生成されたアップローダーのクラス名)をとります。

# post.rb

class Post < ActiveRecord::Base
  # carrierwaveとモデルの関連付け
  mount_uploader :picture, PictureUploader
end

投稿フォームの修正

それでは投稿フォームに画像をアップロードするフォームを出現させましょう。

# posts/_form.html.erb

# ここから追加
<%= form_for(@post, html: {multipart: true}) do |f| %>
# ここまで追加

  <% if @post.errors.any? %>
    <div id="error_explanation" class="alert alert-danger">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  # ここから追加 
  <div class="field">
    <%= f.label :picture %>
    <%= f.file_field :picture %>
  </div>
  # ここまで追加

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br>
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>


これで投稿フォームに画像アップロードフォームが現れました。


posts_controller.rbの編集

画像アップロードの属性(picture)を追加したので、posts_controller.rbのストロングパラメーターを修正します。

# posts_controller.rb

def post_params
params.require(:post).permit(:picture, :title, :content)
end

実際に画像を投稿してみる

今回はアップロードした画像を投稿詳細ページ(show.html.erb)で表示したいと思います。

# posts/show.html.erb

<%= image_tag @post.picture.url %>


それでは投稿してみましょう。

f:id:chi_kun:20160504184127p:plain


はい、きちんと画像がアップロードできました。


今回はシンプルに画像をアップロードする方法でしたが、carrierwaveは他にも画像のリサイズや拡張子を調整することもできます。

くわしくは今後見ていきたいと思います。


※追記

carrierwaveの便利な機能の使い方まとめ

blog.otsukasatoshi.com



本日は以上です。