回形针输入和编辑操作中上传图像的预览

时间:2014-08-03 20:03:04

标签: ruby-on-rails ruby-on-rails-4 paperclip

我正在使用paperclip和rails 4,并且多个图像上传工作正常。但是,我想将其配置为允许上传最多3张图片,仅显示上传图片的输入和预览。

如果我从3个可能的图像中上传图像..然后转到编辑动作..它仍然显示3个上传输入元素而不是2.并且所有人都说“没有选择文件”这是不好的为用户。用户可能会在考虑添加新图像时替换图像。

如何修改我的修改操作或表单,以便对于已填充的资源choose file输入实际显示上传的文件名而不是No file chosen以前是上传还是根本没有显示输入元素?

我的表单字段:

   <%= 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 %>

我的控制器操作:

  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

型号:

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

资产表的属性

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
}

enter image description here

修改

因此看起来(3 - @assets.count).times { @assets.build }确实构建了正确数量的资产,但无论如何它仍会显示3个输入元素。

原因是什么

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

即使assets.count = 1 ??

,也始终显示3个输入

3 个答案:

答案 0 :(得分:4)

拒绝未使用的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? }

更新您的edit操作,以便仅显示剩余的文件字段数

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

显示已上传的图片,并且需要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 %>

清理资产表后测试它。

答案 1 :(得分:1)

您可能只尝试为尚未创建的图像数量构建新资源。您的编辑操作如下所示:

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

您还要记住,如果您在accepts_nested_attributes_for模型中使用Post,则可能需要添加update_only: true

希望有所帮助! :)

答案 2 :(得分:0)

我终于想出了一个很好的方法来做到这一点

仅显示剩余的字段字段,我必须检查它是否仍然是新记录...即使assets.count正确,显示的字段数也不正确。这项验证有所帮助。

 <% if builder.object.new_record? %>

仅显示&#34;已填充&#34;资产,我必须检查它是否不是新记录!

<% @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 %>

现在在编辑操作中,它只显示剩余的字段......当资产已经填充时,它会显示一个带有删除复选框的小预览!

仍然好奇为什么文件字段总是显示3,即使post.assets.count是正确的。

我向Raj致敬,他在努力寻找解决方案方面付出了相当大的努力。