Rails5
画像アップロード
shrine

❄️Shrine gem 使い方 メモ

More than 1 year has passed since last update.

(★)はアプリによって異なります!
★は消して下さい。

$ rails new _________
で、railsアプリを作成し,scaffoldでPhotoに関するもの一式を作った後からです。

Gemfileにgemを追加

gem "shrine"

そして、

$ bundle install

次に、モデルを作成します。
shrineを使う場合、image_data:textです!

→ rails g model (画像を置くページ) その他:型 image_data:text
$ rails g model ★Photo ★title:string image_data:text

そして、データベースに反映。

$ rails db:migrate

config/initializers の中に”shrine.rb”という名前のファイルを自分で作成し、以下を貼り付けます。

config/initializers/shrine.rb
require "shrine"
require "shrine/storage/file_system"

Shrine.plugin :activerecord
Shrine.plugin :logging, logger: Rails.logger

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

modelの中に”image_uploader.rb”というファイルを自分で作成し、Shrineを継承。

models/image_uploader.rb
class ImageUploader < Shrine
end

ここでimageだけを取ってきてるらしいです。

models/★photo.rb
include ImageUploader[:image]

コントローラーの設定

controllers/★pages_controller.rb
class PhotosController < ApplicationController
  def index
    @photos = Photo.all
  end
end

##############################################
private
  def photo_params
      params.require(:photo).permit(:image, :name,...その他)
    end

views/★photos/index.html.erbやviews/★photos/show.html.erbにも
画像を表示したい所に↓のimgの行を追加。

※これを貼る時、インスタンスメゾットで”@”をつける所、つけない所を書き分けているかに注意して下さい。
(初めの頃、@photos each do |photo| 〜  endがあるのを気づかずに、その中に@photosとか書いたりしてました。アホでした。)

views/★photos/★_photo.html.erb
<div>
  <% if ★photo.image_data? %>



    <img src= "<%= ★photo.image_url %>"> #この行が画像を表示する所!!!



  <% end %>
  <%= link_to 'Edit', edit_★photo_path(★photo) %>
</div>
views/★photos/_form.html.erb
  <div class="field">
    <%= form.label :image %>
    <%= form.hidden_field :image, value: @★photo.cached_image_data if defined?(@★photo.cached_image_data) %> 
  #↑私はこの一行が足りなかったです、、、泣
    <%= form.file_field :image %>
  </div>

エラーが出た場合、
・ルートがきちんと設定されているか。
・コントローラーのメゾットの中に、viewに対応するコントローラーがあるか、そして@インスタンスメゾットが定義されているか。
確認してみて下さい!

rails全般において初心者ならではのエラー
JSON::ParserError unexpected token at
のエラーが出た時は、自分で投稿した(キーボードで適当に文字を入力した場合)その内容の一部が問題を起こしています。今までの内容を編集するか、、、削除するか、、、でその投稿を変更して下さい。
私の場合はshrine gem を入れる前に、image_dataに変な文字を入力していたので、rails consoleにてimage_dataをnilに変更して対処しました。

$ rails c
irb(main):008:0> Product.all.each do |product|
irb(main):009:1* product.image_data = nil
irb(main):010:1> product.save
irb(main):011:1> end

もう二度と、フォームの入力は適当にキーボードをガチャガチャって入力しない!!!と誓いました。笑

http://localhost:3000/★photos/new にアクセスし、画像を投稿してみて下さい。