CODEWITHSUNDEEP
ajaxruby-on-rails-3file-uploadcarrierwave
Chris Baxter
Chris Baxter

Reputation: 1456

remove image from model with rails 3 and carrierwave and jquery

I'm using Carrierwave to add and upload an image to Amazon S3. this works ok, and once the form is saved I display the image and an x box to remove it.

I would like to use ajax to handle the click event on the 'x' image' on click I would like to remove the image and clear the field on the form so that the input field is once again displayed

The image field is an attribute of the model class i am editing in the form.

Person < ActiveRecord
 attr_accessible: image

the partial for this part of my form shows the image if it exists, otherwise the input file_field if it does not exists

<div class="field">
    <%= image_tag @pass.background_image_url(:thumb) if @pass.background_image? %>
    <%= f.file_field :background_image if @pass.background_image.to_s == '' %>
    <%= content_tag :div, '', class: "delete_image_fields" if @pass.background_image? %>
</div>

I have some jquery which i can sccessful hide the image field.

jQuery ->

  $('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  event.preventDefault()

The image field gets hidden no problem

What i would like to happen is

a) clear the input field from the pass object b) submit the change (remotely) c) delete the remote image on S3 e) re-display the file_input field for the image so it can re-selected if required

Any help or pointers would be appreciated

UPDATE

I've got this partially working to display corect fields and adjust the input link. but i'm not sure how to actually delete the file from the models attribute

I've updated the partial to the following which dispalsy either the image ro the create file button

<div class="field">
  <%= f.label :background_image %><br />
  <% if @pass.background_image?%>
     <%= image_tag @pass.background_image_url(:thumb)  %>
     <%= f.file_field :background_image , style: "display:none"%>
     <%= content_tag :div, '', class: "delete_image_fields" %> 
  <% else %>
     <%= f.file_field :background_image%>       
  <% end %>

and updated my jquery to this

$('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  $(this).hide()
  $(this).parent().find('input').val('')
  $(this).parent().find('input').show()
  event.preventDefault()

Upvotes: 0

Views: 2089

Answers (1)

pjam
pjam

Reputation: 6356

To delete the file, you could take advantage of the remove_mounted_field_url carrierwave creates.

From here I see two solutions, either create a new action in your controller that will only remove the file, either use the update action. I like to use as much as possible the original actions(index/new/create ...), so I will use the second solution.

You need to do an AJAX PUT request when clicking on the X box. Here what it could look like :

$('.field .delete_image_fields').click ->
  $(this).parent().find('img').hide()
  $(this).hide()
  $(this).parent().find('input').val('')
  $(this).parent().find('input').show()
  event.preventDefault()
  $.ajax
    url: $(this).getParents('form').first().attr('action')
    method: 'PUT'
    data:
      person:
        remove_image: 1 # This will trigger the carrier wave function that remove the uploaded file
  .done (data) ->
      # You can do plenty if things here, for instance notify the user it's been correctly deleted

Note that this will only work on an edition form, as the url of the AJAX query which has to target the update action is taken from the form. I don't think this is a problem, as on the create form no photos is already uploaded, so there's nothing to delete.

Last thing, you could use the siblings method to find both inputs and the image

Upvotes: 1

Related Questions