【Ruby on Rails】refileでの投稿画像プレビュー機能

目標

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

前提

※　▶◯◯　を選択すると、説明等が出てきますので、
　　よくわからない場合の参考にしていただければと思います。

• deviseでログイン環境構築
• ログインユーザーのみができる投稿機能

投稿機能が既にできていると仮定して進めます。

流れ

1 gem refileの導入
2 カラムの追加
3 modelの編集
4 controllerの編集
5 viewの編集

gem refileの導入

Gemfile

gem 'refile', require: 'refile/rails', github: 'refile/refile'

補足

refileは、ファイルをアップロードできるようにするgemです。

ターミナル

$ bundle install

カラムの追加

ターミナル

$ rails g migration AddPostImageIdToPosts post_image_id:string

ターミナル

$ rails db:migrate

t.string "post_image_id"が追加されていればOKです。

db/schema

  create_table "posts", force: :cascade do |t|
    t.integer "user_id"
    t.string "title"
    t.string "body"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "post_image_id" # <--これがあればOK
    t.index ["user_id"], name: "index_posts_on_user_id"
  end

modelの編集

app/models/post.rb

attachment :post_image

補足【refile使用のルール】

1 画像アップロードは、<%= f.attachment_field :image %>で実装
2 モデルに画像アップ用のメソッド「attachment」を追加し、imageを指定
　※今回はpost_image_idを追加したため、post_imageを指定。

controllerの編集

下記を追加することで、post_imageの変更も許可する。

app/controllers/posts_controller.rb

  def post_params
    params.require(:post).permit(:title, :body, :post_image)
  end

viewの編集

今回は先にデフォルトの画像を表示させておくため、
no-image.pngという画像ファイルを事前に用意しました。
保存場所は、app/assets/imagesの中になります。

app/views/posts/new.html.erb

<% form_with,...%>
...

  <div>
    <%= attachment_image_tag @post, :post_image, fallback: "no-image.png", id: "img_prev", style: "height: 250px; width:300px;" %><br>
    <%= f.attachment_field :post_image %>
  </div>

...

<% end %>

...

<script>
$(document).on("turbolinks:load", function(){
  function readURL(input) {
    if(input.files && input.files[0]){
      var reader = new FileReader();
      reader.onload = function (e) {
        $('#img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  $("#post_post_image").change(function(){
    readURL(this);
  });
});
</script>

補足【attachment_image_tag】

refileで用意されたヘルパーメソッドで、imgタグを作成。

補足【fallback】

何か問題が発生した際に表示する画像を指定。

補足【turbolinks:load】

初回読み込み、リロード、ページ切り替えで動くよう設定。

補足【Javascript動作について】

id=img_prevの属性を操作し、
changeメソッドでpostモデルのpost_imgの読み込みURLを変更

補足【Runtime Errorが表示された場合】

エラー画面のコード上に
Refile.secret_key = ...
と表示されています。
そのRefile.secret_key= を含む一行をコピーし、
config/initializers/application_controller_renderer.rbの
一番下に追加すればエラーは解消できます。

P.S.

TwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork