[Rails]carrierwaveを使って画像を保存する

タイトルの通りになります。

ゴールは画像を表示させるまでとなります。

gemを導入

初めはgemを入れます。
バージョンを指定しなければ最新のものがインストールされます。

Gemfile

gem 'carrirewave'

ターミナルでいつものよろしくお願いします。

$ bundle install

アップローダファイルの生成

次にアップローダファイルを作成しましょう。

$ rails generate uploader Image
create  app/uploaders/image_uploader.rb

これでapp/uploadersの中にimage_uploader.rbが生成されていると思います。

ちなみにImageの部分はマウントするモデル名だとか,
わかりやすい名前。私はよくImageで生成しています。

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
 # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick
  # process resize_to_fit: [300, 200]

  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end

  # 以下省略
end

このファイルの中で画像アップロードに関する設定ができます。例えば、アップロードする画像の拡張子の制限だったり、画像サイズのリサイズだったりいろんなことができます。

モデルに書く

画像アップロードさせたいモデルに先ほど作成したファイルをマウントしてあげましょう。

今回はhogeモデルのimageカラムに画像を登録させたいケースで考えます。

hoge.rb

class hoge < ApplicationRecord
  mount_uploader :image, ImageUploader
end

登録するためのFormを作る

各ページ必要な情報を渡してあげます。

hoges_controller.rb

class ArticlesController < ApplicationController

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(user_params)
    if @article.save
      redirect_to user_path(@article)
    else
      render :new
    end
  end

  private
  def article_params
    params.require(:article).permit(:image)
  end
end

/hoges/new.html

<%= form_with model: @hoge, local: true do %>
    <div class="field">
        <%= f.label :image %>
        <%= f.file_field :image %> <!--画像はfile_field -->
    <div class="action">
        <%= f.submit %>
    </div>
<% end %>

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

画像の表示は基本的には、以下のように記述すると表示されます。

<%= image_tag @article.image.url %>
<%= image_tag @article.image.to_s %> 

終わりに

最後まで読んでいただきありがとうございます。
お勉強している方に少しでも力になればと思います。