How to preview uploaded image instantly with paperclip in ruby on rails

9
votes

Basically, what I want to accomplish is to allow user to preview their uploaded image before they submit it.

In the controller, i have

def index
    @temp = Temp.new
end

Since @temp is not saved, can I still use the solution from Rails: Paperclip & previews. If not, can I run javascript or something to run some ruby code?

This is my html:

= form_for @temp, :url => temp_path, :html => { :multipart => true } do |form|

   = form.file_field :image

= image_tag @temp.image.url

= image_tag @temp.image.url(:medium)

= image_tag @temp.image.url(:thumb)

2
javascriptruby-on-railsruby

2 Answers

32
votes

If I understand you correctly you want to preview an image before it is actually uploaded, right? You can do so by using some javascript.

By setting the width and height attributes of the image tag you can simulate a thumbnail.

$(function() {
  $('#pictureInput').on('change', function(event) {
    var files = event.target.files;
    var image = files[0]
    var reader = new FileReader();
    reader.onload = function(file) {
      var img = new Image();
      console.log(file);
      img.src = file.target.result;
      $('#target').html(img);
    }
    reader.readAsDataURL(image);
    console.log(files);
  });
});

and the html: 

<form>
  <input type="file" id="pictureInput"> 
</form>
<div id="target">
</div>

you can check it out on code pen

0
votes

this worked in my case:

  $('.file-input').on 'change', (event) ->
    $('.image').attr('src', URL.createObjectURL(this.files[0]))