RailsとCarrierWaveで画像アップロードを実装する

CarrierWaveというGemを使って画像のアップロードを実装しました。
今回はUserモデルのimageというプロパティーに画像をセットする実装をします。

github.com

CarrierWaveのインストール

CarrierWaveを入れる前にImageMagickをインストールします。
Macの場合は下コマンドでインストールします。

brew install imagemagick@6
brew install pkg-config
export PKG_CONFIG_PATH=/usr/local/opt/imagemagick@6/lib/pkgconfig

ImageMagickを入れたらBundlerでcarrierwaveとrmagickを入れます。

gem 'carrierwave'
gem 'rmagick'

CarrierWaveでファイルアップロード

最初にファイルのアップローダーを追加します。
追加は下コマンドで行います。

rails g uploader image

コマンドを打つと下のようなファイルが生成されます。(余計なコメントなどは削除)
画像のパスやサムネイル生成の有無などを変更したい時はこのファイルに設定を書きます。

class ImageUploader < CarrierWave::Uploader::Base
  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

次にUserモデルを作成します。
scaffoldで一気に作ってしまいます。

rails g scaffold user image:string

usersテーブルのimageカラムはStringのままで構いません。
ここにはファイルのパスが入ります。

class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.string :image

      t.timestamps null: false
    end
  end
end

次はUserモデルにファイルアップロード用の処理を記述します。
user.rbに下のように1行追加します。

class User < ActiveRecord::Base
  mount_uploader :image, ImageUploader
end

次はファイルのアップロード画面を実装します。
views/users/_form.html.erbのフォーム周りの実装を修正します。

<%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

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

  <div class="field">
    <%= f.label :image %><br>
    <!-- 下2行を変更 -->
    <%#= f.text_field :image %>
    <%= f.file_field :image %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

これでファイルアップロード用画面ができました。

アップロードしたファイルは、ImageUploaderの設定に従ってpublic/uploads/user/image以下に保存されます。

CarrierWaveで画像の表示

最後にアップロードしたファイルの表示を実装します。
views/users/show.html.erbを下のように修正してください。

<p id="notice"><%= notice %></p>

<p>
  <strong>Image:</strong>
  <!-- 下2行を変更 -->
  <%#= @user.image %>
  <%= image_tag @user.image.url %>
</p>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

ブラウザで確認すると正しくファイルが表示されています。

参考URL

macOS に RMagick をインストールする
Rails 超お手軽な画像アップローダー CarrierWave の使い方 | Workabroad.jp