見出し画像

carrierwaveを利用して画像アップロード機能を追加する【Day 17/30 2nd】

こんにちは、たわらです。

本記事は、画像アップロードを実装できるcarrierwaveを実装する方法を整理したいと思います。

carrierwaveって何?

carrierwaveは画像アップロードのときによく利用されるgem(ライブラリ)です。他に、paperclipというのもあるそうです。

carrierwaveはUploaderクラスを用意します。そしてこのクラスをモデルにマウントさせます。モデルに認識させて、使えるようにする、という意味です。

なので、同様の画像アップロード機能を別のモデルにマウントさせることが簡単にできます。一方のpaperclipは都度、対象のモデルに記述が必要になるみたいです。このあたりが大きな違いだそうです。

uploaderクラスを生成する

gemを追加してbundleします。「rails g uploader ○○」というコマンドで、新規に uploadersディレクトリのなかに、〇○_uploader.rbというファイルが生成されます。

gemを追加してbundleします。「rails g uploader ○○」というコマンドで、新規に uploadersディレクトリのなかに、〇○_uploader.rbというファイルが生成されます。

で、このファイルのなかで、色々と指定ができます。例えば、、、

・画像がアップロードが選択されなかった場合に、デフォルトで選択される画像を選ぶ

 def default_url
   'sample.jpg'
 end

・アップロードできる拡張子を制限する

 def extension_whitelist
   %w[jpg jpeg gif png]
 end

などなどです。

モデルにマウントさせる

例えば、こんなふうに対象のモデルに記述します。

class Board < ApplicationRecord
    mount_uploader :board_image, BoardimageUploader
end

DBに保存されるのは、ファイルそのものではなく、ファイルへの参照データです。なので、画像用のデータファイルを参照するデータを格納するカラムを指定するわけです。たぶん。

(なので、画像用カラムがなければ、「rails g migration add_image_to_user image:string」などを事前に実施しておく必要があります)

ビューテンプレートを作成

ファイルをアップロードできる入力フィールドを作成します。例えばこんなふうに、

<div class="form-group">
 <%= f.label :user_image %>
 <%= f.file_field :user_image %>
 <%= f.hidden_field :user_image_cache %>
</div>

labelを付与すると、ビューテンプレートに表示された、(この場合は)user_imageという文字列をクリックすると、画像を選択できるボックスが自動的に開くようになります。

うまくできないようであれば、Chromeの検証機能を使って、htmlを確認して、labelタグのfor属性の値と、inputタグのid属性が一致しているか確認しましょう。Railsはよかれと思って、自動的にいろいろやってくれるのですが、揃ってないとうまくできません。

また、hidden_fieldメソッドで、〇〇_cacheとして用意してあげておくと、のちのち便利です。

editアクションで、画像を更新したりする必要があるときに、デフォルトで前回の画像が残っている状態にしたいです。そういうときに役立つのです。

Strongparamsに忘れずに追加

で、忘れずに、入力フィールドからuser_imageとuser_image_cacheを受け取れるように、Strongparamsに二つのシンボルを追加しておきましょう。

最後に

読んでくださったくださった、ありがとうございます。

参考文献


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
うれしいです!
3
開発エンジニアへの転職を目指しています。新人賞応募用小説と140字小説を書いています。Railsで140字小説投稿webアプリを作りたいです。RUNTEQというプログラミングスクールに通いはじめました(2020/05/06)

こちらでもピックアップされています

未経験から開発エンジニアになるまで
未経験から開発エンジニアになるまで
  • 46本

開発エンジニアになるためのポートフォリをづくりをアウトプットした過程を集めたもの

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。