Rails file upload (paperclip) on edit

浪子不回头ぞ 提交于 2019-11-30 11:06:12

For Rails3 here's what I do. Sorry, I haven't used Rails4 yet.

To display to the user if they have already uploaded a file, do this in your view:

<% if @blog.image.exists? %>
  <%= image_tag @blog.image.url(:thumb) %><br/>
<% end %>
<%= f.file_field :image %>

Then, to allow for the user to remove the current upload add this to your view (inside that if block):

<%= f.check_box :delete_image %>Delete Image<br/>

And you handle that checkbox in your model:

  before_validation { image.clear if @delete_image }

  def delete_image
    @delete_image ||= false
  end

  def delete_image=(value)
    @delete_image  = !value.to_i.zero?
  end

That way if the user sets the checkbox it will clear the image on the next save.

The above method didn't work for me with multiple fields.

I'm used javascript to do this as I am also using cocoon to dynamically add multiple images, on the edit form I am displaying all images with their own delete buttons. I then count the number of image objects and hide that same amount of image file upload boxes. I currently have it set for multiple but with just a little change it could work for your case. After delete, they are redirected back where in your case, count would be 0 and it would show the upload box.

This is the nested form section

<h3 class="text-muted">Upload Images</h3>
<% @rental.property_photos.each do |i| %>
    <div class="pic">
        <%= image_tag i.avatar.url(:thumb), class:"img-responsive property-images" %>
        <%= link_to i, method: :delete, data: { confirm: 'Are you sure?' } do %>
        <i class="fa fa-times-circle delete-pic"></i>
        <% end %>
    </div>
<% end %>
<fieldset id="property_photos">
    <%= f.fields_for :property_photos do |p| %>
    <%= render 'property_photo_fields', :f => p %>
    <% end %>
</fieldset>
<div class="links">
    <%= link_to_add_association 'Add Image', f, :property_photos, class:"fa fa-plus margin-bottom-20" %>
</div>

My nested form

<div class="nested_fields">
    <div class="col-md-3 picUploader">
         <%= f.file_field :avatar %>
    </div>
</div>

My javascript

$(document).ready(function () {

     var count = $('.pic').length;

     function hideElements(x) {
         $('.picUploader').slice(0,x).hide();
     }

     hideElements(count);

})

with a little css your results then look like this...

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!