paperclip inputs and previews for uploaded images in edit action

Question

I am using paperclip and rails 4 and multiple image uploading works correctly. However I would like to configure it to allow uploading of a maximum of 3 images and only show inputs and previews for uploaded images.

If I upload an image out of the 3 possible images.. and then go to the edit action.. it still shows 3 upload input elements instead of 2. And all of them say "no file chosen" which is not good for the user. The user might replace the image while thinking they are adding a new one.

How can I modify my edit action or my form so that for filled assets, the choose file input actually shows the uploaded file name instead of No file chosen when an image has previously been uploaded or not show the input element at all?

My form fields:

   <%= f.fields_for :assets do |builder| %>
    <% unless builder.object.new_record? %>
         <p>Images</p>
       <%=link_to image_tag(builder.object.attachment.url(:thumb)), builder.object.attachment.url(:original) %>
      Delete: <%= builder.check_box :_destroy %>
    <% end %>
   <% end %>

My controller actions:

  def new
    @post = Post.new
    3.times { @post.assets.build }
...
    end
  end


  def edit
    @post = Post.find(params[:id])  
    if @post.assets.count < 3
      3.times { @post.assets.build }
    end
  end

Model:

class Asset < ActiveRecord::Base

 belongs_to :post
 #attr_accessible :attachment
 has_attached_file :attachment, :styles => { :medium => "600x600>", :small => "200x200>", :thumb => "100x100>" }, 
 :default_url => "no_image_fr_:style.png"
 validates_attachment_content_type :attachment, :content_type => %w(image/jpeg image/jpg image/png)
end

Attributes for Asset table

class Asset < ActiveRecord::Base {
                         :id => :integer,
                 :post_id => :integer,
                 :created_at => :datetime,
                 :updated_at => :datetime,
       :attachment_file_name => :string,
    :attachment_content_type => :string,
       :attachment_file_size => :integer,
      :attachment_updated_at => :datetime
}

EDIT

So it looks the (3 - @assets.count).times { @assets.build }does build the correct number of assets but it still displays 3 input elements no matter what.

What causes

<%= f.fields_for :assets do |builder| %>
   <%= builder.input :attachment, as: :file, :label => "Image:", wrapper: :horizontal_file_input  %>
<% end %>

to always show 3 inputs even though assets.count = 1 ??

Answer 1

Reject your unused file_fields:

# model
has_attached_file :attachment,
                     :styles => {
                       :medium => "600x600>",
                       :small => "200x200>",
                       :thumb => "100x100>" },
                     :default_url => "no_image_fr_:style.png",
                     :reject_if => lambda { |t| t['attachment'].nil? }

Update your edit action, so that it shows only remaining number of file fields

# controller
def edit
  @post = Post.find(params[:id])  
  @assets = @post.assets
  (3 - @assets.count).times { @assets.build }
end

Show already uploaded images and required file_fields.

<%= f.fields_for :assets do |builder| %>
  <%= builder.file_field :attachment %>
<% end %>

<p>Images</p>
<% @assets.each do |a| %>
  <%= link_to image_tag(a.attachment.url(:thumb)), a.attachment.url(:original) %>
  Delete: <%= check_box_tag :_destroy %>
<% end %>

Test it after cleaning up your assets table.

Answer 2

You might try only building new assets for the number of images that have not been created. Your edit action would look like this:

def edit
   @post = Post.find(params[:id])
   (3 - @post.assets.count).times do
     @post.assets.build
   end
end

also you'll want to keep in mind that if you're using accepts_nested_attributes_for in your Post model you might need to add the update_only: true

hope that helps! :)

Answer 3

I actually finally figured out a nice way to do this

to display only the remaining field fields I had to check if it was still a new record... even though assets.count was correct, the number of fields displayed was incorrect. This verification helped.

 <% if builder.object.new_record? %>

to display only the "filled" assets, I had to check if it's not a new record!

<% @post.assets.each do |ast| %>

  <% if !ast.new_record? %> 

   <%=link_to image_tag(ast.attachment.url(:thumb)), ast.attachment.url(:medium), :popup=>['original_image', 'height=700,width=900'] %>  <%= check_box_tag :_destroy %>   delete  </br></br>
   <%end%>

<% end %>

Now in the edit action it only shows the remaining fields... and when an asset is already filled, it shows a little preview with a deletion checkbox!

Still curious why the file fields were always showing 3 even though post.assets.count was correct.

I'm awarding the bounty to Raj who made considerable effort in trying to find a solution.