ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

RailsでCloudinaryを使う

CarrierWave、Cloudinaryを使った画像アップロードの方法です。

cloudinary.com

今回のバージョン

ruby: 2.5.0
rails: 5.1.6

Cloudinaryに登録

Cloudinaryに登録して使える状態にしておきます。
登録後サイト内で cloudinary.yml がダウンロードできるはずなのでしておきましょう。

Gem追加

Gemfileに下記を追加

gem 'carrierwave'
gem 'cloudinary'
bundle install

Uploader作成

rails g uploader Image

Cloudinaryを使うよう修正

storage :file

を以下に変更

  if Rails.env.production?
    include Cloudinary::CarrierWave
  else
    # 本番以外ではローカルに保存する
    storage :file
  end

ファイルアップロードしたいモデルにマウント

例Userモデル

class User < ApplicationRecord
  mount_uploader :image, ImageUploader
end

cloudinary.yml追加

最初にダウンロードしたcloudinary.ymlを config/cloudinary.yml に配置

フォーム修正

fileのinputとサムネイルを表示 _form.html.erb

<%= image_tag(@user.image_url(:thumbnail), :width => 80, :height => 80) %>
<%= f.file_field :image %>