ファイルアップロード機能をお手軽に作成出来る gem CarrierWave のインストール・設定を行う。
GitHub リポジトリ CarrierWave
(https://github.com/carrierwaveuploader/carrierwave)
※ インストールの方法から、利用方法までは上記 GitHub に全てまとまっています。
前提
| バージョン | |
|---|---|
| Ruby | 2.1.1 |
| Rails | 4.2.0 |
| CarrierWave | 0.10.0 |
1. インストール
Gemfile へ CarrierWave を追記
gem 'carrierwave'
Gemfile をインストール。
( rails プロジェクト内に閉じた状態で gem をインストールしたいため --path オプションを利用 )
$ bundle install --path vendor/bundle
2. uploader クラス作成
CarrierWave では uploader というジェネレータが提供されるので、任意の名前でクラスを作成。
以下では image という名前で uploader クラスを生成。
$ rails g uploader image
3. モデルクラスへ作成した uploader を設定
store という店舗情報を扱うモデルクラスへ、image という string 型のカラムを追加する想定で説明。
カラム名は必ず、作成した uploader と同じ名前にする。
マイグレーションを作成 & 実行。
$ rails g migration addImageToStores image:string
$ rake db:migrate
store モデルへ uploader を設定。
mount_uploader :image, ImageUploader
4. ビューの修正
form へファイル選択ボックスを追加。
また、バリデーションでエラーが発生し、フォームが再表示された場合もアップロードされたファイルが保持されるように カラム名_cache という hidden フィールドを用意しておく。
<div class="field">
<%= image_tag @store.image.url if @store.image? %>
<%= f.label :image %><br>
<%= f.file_field :image %>
<%= f.hidden_field :image_cache %>
</div>
※ Rails4 から、form 内に file_field を含む場合、自動的に multipart オプションをつけてくれるので、form_for ヘルパー等の修正は不要。
画像を表示する。
<p>
<strong>Image:</strong>
<%= image_tag @photo.image.url %>
</p>
5. コントローラの修正
strong params へビューで追加した image と image_cache を追記する。
params.require(:store).permit(:name, :address, :image, :image_cache)
おまけ
uploader クラスで、ファイルアップロード時の処理を制御。
ジェネレータで作成したクラスを見ると、よく使われる設定がコメント書きされているので、それをもとに変更するとよいかも。
# JPEG 形式に変換して保存
process convert: "jpg"
# 拡張子 jpg jpeg gif png のみ許可
def extension_white_list
%w(jpg jpeg gif png)
end
# ファイル名は original.jpg で保存 (jpeg変換しているので拡張子は固定)
def filename
"original.jpg" if original_filename
end
以上。