画像投稿機能

多くの人が画像投稿機能に関する記事を書いているが自分もアウトプットがてら記事書いていこうと思う。

1.DBのカラムを調べる。

初めに画像を投稿してDBに保存するには保存できるカラムが必要。
なのでそのカラムの有無を調べよう。
db/schema.rbを開く。

db/schema.rb

create_table "posts", force: :cascade do |t|
    t.string "title"
    t.text "text"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "img"
    t.integer "user_id"
  end

私の場合はimgカラムがあるので大丈夫。カラムがない人はimgカラムあるいはimageカラムを追加しよう。

2.カラムの追加

画像を保存するためのimgカラムを追加。

ターミナル

$ rails g migration AddImgToPosts img:string

するとPostsテーブルにimgというカラムが追加される。続けて、

ターミナル

$ rails db:migrate

をして保存する。

3.Carrierwaveのインストール

Gemfileを開きcarrierwaveをインストール

Gemfile

gem 'carrierwave', '~> 1.3', '>= 1.3.1'

$ bundle 

を実行して完了。

4.mount_uploaderを準備する

ターミナル

$ rails g uploader img

ターミナルでこれを実行するとuploadersディレクトリとimg_uploader.rbファイルが生成される。
※imgと書いているところは追加したカラムと合わせてください。

例えばimageカラムを追加したのであれば

$ rails g uploader image

です。

app/models/post.rbに移動。

app/models/post.rb

class Post < ApplicationRecord
 mount_uploader :img, ImgUploader
end

と記述する。

5.コントローラを変更する

app/controllers/posts_controller.rb

class PostsController < ApplicationController
: 
private
 def post_params
  params.require(:post).permit(:title, :text, :img)
 end
end

6.ビューを変更

フォームのパーシャルファイルを変更し、imgの欄を追加する。
画像をアップロードするにはfile_fieldというものを使う。

app/views/posts/_form.html.erb

<%= form_for (@post) do |f| %>
 :
 :
 <%= f.label :画像 %><br />
 <%= f.file_field :img, class: "image" %>
 :
 <%= f.submit %>

<% end %>

app/views/posts/show.html.erb

<p>
  <strong>Text:</strong>
  <%= @post.text %>
</p>
<p>
  <strong>Image:</strong>
  <%= image_tag @post.img.url%>
</p>

※インスタのように絶対に画像をアップロードするアプリだと上の<%= image_tag %>でいいが画像をアップしたりしなかったりだとこのままではエラーになるので以下のように
if @post.img?
を付け加えよう。

app/views/posts/show.html.erb

<p>
  <strong>Text:</strong>
  <%= @post.text %>
</p>
<p>
  <strong>Image:</strong>
  <%= image_tag @post.img.url　if @post.img? %>
</p>

7.画像の削除

app/views/posts/_form.html.erb

 <%= f.label :画像 %><br />
 <%= f.file_field :img, class: "image" %>
に続いて、
 <p><%= f.check_box :remove_img %>画像を削除する</p>

を加える。

最後にremove_imgを追加。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
: 
private
 def post_params
  params.require(:post).permit(:title, :text, :img, :remove_img)
 end
end