Image Preview With Carrierwave And Rails

Sep 30th, 2015
1 min read
info

Note: this assumes you already have carrierwave up and running. For help with that see the documentation on the carrierwave repo.

The other day I implemented image preview using Carrierwave and I couldn’t seem to find any great tutorials/blog posts on how to do it. Wanted to post how to do it in case someone else was interesting image preview as well.

# ... rest of the form ...

# Your carrierwave image uploader
<div class="form-group">
  <img id="img_prev" width=300 height=300 src="#" alt="your image" class="img-thumbnail hidden"/> <br/>
  <span class="btn btn-default btn-file">
    Upload Avatar Image<%= f.file_field :avatar, id: "avatar-upload" %>
  </span>
  <%= f.hidden_field :avatar_cache %>
</div>

This is the javascript that will create an event handler on change for the file uploading input tag and display the image on the screen. I applied some basic bootstrap classes to the previewed image to make it look nicer.

$(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]);
    }
  }

  $("#avatar-upload").change(function(){
    $('#img_prev').removeClass('hidden');
    readURL(this);
  });
});

For more neat Rails Tips & Tricks check out my repo on github.

ruby
tutorials
rails

Can I be honest? I want your email.

I love teaching and writing new content but sometimes find it hard to justify.

Getting your email motivates me to spend more time creating awesome content and notifies you when new posts or screencasts come out.

I will never share your email or spam. Expect less than 5 emails a year and feel free to unsubscribe at any time.