Rails 4 nested form image preview with Paperclip

Question

I have two models:

class Photo < ActiveRecord::Base
  has_many :pictures, dependent: :destroy
  accepts_nested_attributes_for :pictures
end

class Picture < ActiveRecord::Base
  belongs_to :photo
  has_attached_file :image, styles => 
  {
     :thumb => "200x200#"
  }
end

and here is my form (pasting only the relevant nested part):

<%= simple_nested_for @photo, html: {multipart: true} do |f| %>
 <%= f.simple_fields_for :picture_contents do |p| %>
    <%= p.input :image, as: :file, label: "ADD PHOTO", :label_html => {class: "fileBt"}, :input_html => {class: "fileBt", id: "pictureInput", accept:"image/*"}, :item_wrapper_tag => :div, :item_wrapper_class => "col-md-4" %>
<div class="target"></div>
   <%= a.link_to_remove "REMOVE", :class => "btn btn-danger btn-xs" %>
<div>
<%= f.link_to_add "ADD", :pictures, class: "fileBt" %>
</div>
<% end -%>

I want to be able to have a preview for each nested form. For now I can manage to display a preview for the first picture, but when I add a second nested form I can't display a preview for it. I need to be able to display a preview for each uploaded image.

This is the javascript I am using (credit goes to comment):

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

Any help would be greatly appreciated.

Rails simple_form DOM

score 1 · Accepted Answer · answered Mar 02 '15 at 20:17

1

I'm not sure if this is the problem, but you shouldn't have multiple HTML elements with identical IDs. Try changing the JS so that it uses the class of file fields instead.

$(function() {
  $('.fileBt').on('change', function(event) {
...

Note that you probably want to rename that class to something more meaningful and specific to image upload fields. For example ".photo-upload-field" would work :)

answered Mar 02 '15 at 20:17

Dabrorius

1,039
1
8
17

When I add a second nested form and add an image, the preview is displayed in the first
with class "target" instead of the one belonging to the second block.
– Alistair Mar 02 '15 at 20:19
I'm not sure how the generated DOM looks like but you could try by replacing $('.target').html(img); with $(this).parent().find('.target').html(img) – Dabrorius Mar 02 '15 at 21:12
I tried that as well, I can get one image to display by using this line $(this).parent().next('.target').html(img) but it always selects the first div with class 'target' and never the newly generated ones. – Alistair Mar 02 '15 at 21:39
I just added a screenshot of the DOM. The input is inside the div "form-group file optional" and the div "target" is right beneath it. Each nested form resides inside the div "fields". – Alistair Mar 02 '15 at 21:45
You could try using $(this).next().html(img), you don't need to go to the parent, you just need a sibling. Don't forget you can add "debugger" keyword in that function to start a debugger in chrome. It will pause the function execution and you can do calls manually from the console then. That way you can try out bunch of different things fast, and see exactly what's going on. – Dabrorius Mar 02 '15 at 22:43
Can you share what the final solution was? – Dabrorius Mar 05 '15 at 11:34

Rails 4 nested form image preview with Paperclip

1 Answers1