carrierwaveを使って画像アップロード機能を追加する

carrierwaveとは

Railsにおける画像アップロード用ライブラリです。
Uploaderクラスを別に持つから、
モデルが異なる場合でも都度記載する必要がありません。

gemfileにgem carrierwaveを追加し、bundle installを行います。

carrierwaveの使用方法

まずアップローダーを作成

$ rails g uploader HogeImage

生成されたアップローダーにデフォルトの画像ファイルと、
アップロード可能なファイル種別を指定します。
デフォルトで記述されているのでコメントタグを外します。

class HogeImageUploader < CarrierWave::Uploader::Base
  # 使用するストレージを指定。
  storage :file

  # carrierwaveを通じた画像のアップロード先をどこにするのか指定。  
     指定したディレクトリにアップロードされたファイルが保存されていく。
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # デフォルトの画像ファイルを指定。
  def default_url      
    'hoge_placeholder.png'
  end

  # アップロード可能なファイル種別を指定。
  def extension_whitelist    
    %w[jpg jpeg gif png]
  end
end

アップロード先のフォルダを.gitignoreに登録しておきます。
/config/database.ymlの下に記述しておきます。

/vendor
  /config/database.yml
  /public/uploads

.gitignoreはローカル環境でアップロードした画像ファイルを
アップロードしないようにするため。(gitの管理対象外にする)

モデルで使用するように宣言

Hogeモデルにhoge_imageを追加します。

$ rails g migration AddHogeImageToHoges hoge_image:string

Hogeモデルにアップローダーの仕様を宣言します。

mount_uploader :hoge_image, HogeImage Uploader

実際にアップロード作業を行う

コントローラのビューに画像ファイルのフィールドを追加します。

コントローラで画像ファイルの入力を受け付けます。

params.require(:hoge).permit(:title, :body, :hoge_image, :hoge_image_cache)

フォームに画像ファイルの入力フィールドを追加します。

<div class="form-group">
  <%= f.label :hoge_image %><br>
  <%= f.file_field :hoge_image, class: 'form-control mb-3', accept: 'image/*' %>
  <%= f.hidden_field :hoge_image_cache %>
</div>

:hoge_image_cacheはアップロードに失敗した際も
ファイルが消えないようにするために必要です。

accept属性でファイルの拡張子を制御できます。
accept: 'image/*'は画像ファイル accept: '.pdf'は拡張子pdf

アップロードした画像のURLを指定するとき、
アップローダーファイルでdefault_urlを設定しているから、
もし画像をアップロードする処理をしていなくても
elseの処理を記載する必要はありません。
設定しているデフォルトの画像が使われます。

学習記録

アウトプット用に作りました