Refileの使い方

ImageMagickをインストール

本番サーバーとか開発環境にimage-magickがないと動かないのでインストールしておく。

インストールされてるか確認

$ convert -version #以下のようにVersion: ImageMagick バージョン名が表示されていればOK
Version: ImageMagick 7.0.10-38 Q16 x86_64 2020-11-16 https://imagemagick.org
Copyright: © 1999-2020 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI 
Delegates (built-in): jng jpeg png tiff zlib

インストール方法(Cloud9の場合)

$ sudo yum -y install libpng-devel libjpeg-devel libtiff-devel gcc
$ cd ~
$ wget http://www.imagemagick.org/download/ImageMagick.tar.gz
$ tar -vxf ImageMagick.tar.gz
$ ls
$ cd ImageMagick-x.x.x-xx
$ ./configure
$ make
$ sudo make install

Gemをインストール

Gemfile

gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"

$ bundle install

画像データを保存するカラムを追加

Userモデルにthumbnailというカラム(サムネイル画像名を保存するカラム)を追加します。

$ rails g migration AddThumbnailToUser thumbnail_id:string

class AddThumbnailToUser < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :thumbnail_id, :string
  end
end

$ rails db:migrate

modelを修正

追加したカラム名から_idを抜いた部分をattachmentとして設定

app/models/user.rb

class User < ApplicationRecord
  attachment :thumbnail # 追加
end

ファイルアップロードのform

<%= f.attachment_field :thumbnail %>でフォームの画像アップロード部分を設置

<%= form_with model: @user, local: true do |f| %>
  <div>
    <%= f.label :name %>
    <%= f.text_field :name, class: 'form-control' %>
  </div>
  <div>
    <%= f.attachment_field :thumbnail %> <!-- 追加 -->
  </div>
  <%= f.submit class: 'btn btn-success' %>
<% end %>

strong_parametersを修正

app/views/controllers/users_controller.rb

class UsersController < ApplicationController
  
  private
  def user_params
    params.require(:user).permit(:name, :thumbnail) # thumbnail_idではないので注意
  end
end

画像を出力

<%= image_tag attachment_url(@user, :thumbnail, :fill, 100, 100) %>

Runtime Errorが表示された場合

.env

REFILE_SECRET_KEY=hogehoge #エラーメッセージ内Refile.secret_keyの値

$ touch config/initializers/refile.rb

config/initializers/refile.rb

Refile.secret_key = ENV['REFILE_SECRET_KEY']

最後にサーバーを再起動して環境変数を読み込む