以前、CarrierWaveで画像を保存する方法を以前紹介しました。
今回は、CarrierWaveの画像のプレビュー機能を活用する方法をまとめます。
画像ファイルフィールドにidを追加
まずフォーム内の画像ファイルのフィールドにidを追加します。Javascriptで処理するときに使います。
<%= f.file_field :image id: :user_img %>
画像を表示させる枠を追加
次に、その下部などに画像を表示させる箇所を追記します。画像がある場合とない場合で表示を切り替えるようにします。ここにもidをセットしておき、あとでJavascript内で使います。
<% if @user.image.present? %> <%= image_tag @user.image, id: :img_prev %> <% else %> <%= image_tag "sample.jpg", id: :img_prev %> <% end %>
Javascriptでプレビュー機能を実装
更にその下部にJavascriptを追記します。
具体的には、下記のように画像ファイルフィールドの値が変化したとき(画像が登録されたとき)に、画像ファイルを読み込み、画像表示枠に反映させます。
<script type="text/javascript"> $(function() { function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img_prev').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#user_img").change(function(){ readURL(this); }); }); </script>
入力フォームで画像を投稿する場合、プレビュー機能は便利なので、ぜひ使ってください。
Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。