【rails】画像アップロード(shrine)導入からherokuでの本番環境利用(S３)まで パート１

現在ポートフォリを作成中で無事に動いたのでまとめたいと思います。

shrineを導入

Gemfile

gem 'shrine'

そしてbundle

shrineの初期設定

初期設定を書くファイルを作ります。
touch config/initializers/shrine.rbこのファイル内に

require "shrine"
require "shrine/storage/file_system"

Shrine.storages = {
     # temporary
    cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"),
    # permanent
    store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store")}

Shrine.plugin :activerecord
Shrine.plugin :cached_attachment_data

参照:https://shrinerb.com/#plugins
参考:GitHub - shrinerb/shrine: File Attachment toolkit for Ruby applications

追加したいモデルにimage_data属性を追加

私の場合はPostモデルなので、
rails g migration add_image_to_posts image_data:text
データ型はtext でないといけません。そしてrails db:migrate

ImageUploaderモデルを作る。

このファイル内には、容量を制限するバリテーションや表示する画像をリサイズすることを書くのですがまずは、中身はなしで良いです。
まずはフォルダを作りますmkdir app/uploaders
次にファイルを作ります。touch app/uploaders/image_uploader.rb
このファイルに内に、

class ImageUploader < Shrine
  # まずは空欄で良いです。
end

画像を入れるモデル側に追記する

僕の場合はPostモデルなので 、

class Post < ApplicationRecord
    include ImageUploader[:image]
   # image_data属性で作成しましたが[:image]と書かなくてはいけません。
end

これでほとんど準備はできました。

controller側の記述

def create
  @post = Post.new(post_params)
  @post.save
end

private
def post_params
 params.require(:post).permit(:image)
  #ここも:imageと書く
end

form側の記述

私の場合 app/views/pots/_form.html.slimですが、

= form_with model: @post, local: true do |f|
    .field
        = f.label :image_data
        = f.hidden_field :image, value: @post.cached_image_data
        = f.file_field :image
    = f.submit nil

show側の記述

= image_tag  @post.image_url

これでアップロードしたものと同じサイズの画像が表示されます

追記

gitignoreに /public/uploads/とかいて画像をgithubに上がるのを阻止するのがおすすめです