前回のCarrierWaveを使った画像の投稿①の続きです。
掲示板に画像を投稿するところまで実装ししていきましょう。
読者の皆様に少しでも参考になれば幸いです。
画像投稿フォームの作成
<div class="form-group">
<%= f.label :board_image %>
<%= f.file_field :board_image, class: "form-control" %>
<%= f.hidden_field :board_image_cache %>
</div>
f.file_fieldによってファイル選択ボックスを作成します。
<%= f.hidden_field :board_image_cache %>この部分ですが、
画像ファイルのアップロードに失敗した際、ファイルが消えないようにしてくれます。
画像のプレビュー機能の作成
<div class='mt-3 mb-3'>
</div>
これにより、画像を選択した時に、その画像のプレビュー画面が実装されます。
app/uploaders/board_image_uploader.
def default_url
'sample.jpg'
end
また、画像を選択していない場合は、デフォルト画像が選択できるように設定します。
投稿された画像ファイルの処理
public/uploads/配下に保存される画像は、GitHubにpullする必要がないので、.gitignoreファイルに以下を記載します。Git管理下から除外しましょう。
/public/uploads
参考ページ
最後に
2回に渡ってCarrierWaveの実装方法を解説いたしました。
CarrierWaveを使った画像投稿をぜひマスターしてください。
最後まで読んでいただきありがとうございます。
