從導軌3和載波和jquery模型中刪除圖像

Question

我正在使用Carrierwave添加圖像並將其上傳到Amazon S3。這工作正常，一旦表格被保存，我會顯示圖像和一個x盒子刪除它。

我想用AJAX來處理上點擊「X」形象」上的click事件我想刪除的形象和清除表單上的字段，以便輸入字段，則再次顯示

圖像字段是我在表單中編輯的模型類的屬性。

Person < ActiveRecord 
attr_accessible: image 

部分對我的形式，這部分顯示了圖像，如果它存在，否則輸入的是，file_field，如果它不存在，它

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

我有一些jQuery的，我可以sccessful隱藏圖像領域。

jQuery -> 

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

像場被隱藏沒有問題

什麼，我想發生是

一）清除傳球對象）輸入字段 b提交更改（遠程） Ç ）刪除S3上的遠程圖像 e）重新顯示圖像的file_input字段，以便可以根據需要重新選擇

任何幫助或指針，將不勝感激

UPDATE

我已經部分工作，顯示corect字段並調整輸入鏈接。但我不知道如何真正刪除文件從模型屬性

我已經更新了部分到dispalsy無論是圖像Ro創建文件按鈕

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

以下並更新了jQuery來此

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

Answer 1

要刪除的文件，你可以採取的remove_mounted_field_urlcarrierwave creates優勢。

從這裏我看到了兩種解決方案，要麼在控制器中創建一個只會刪除文件的新動作，要麼使用update動作。我喜歡儘可能多地使用最初的操作（index/new/create ...），所以我將使用第二種解決方案。

單擊X框時需要執行AJAX PUT請求。這可能是什麼樣子：

$('.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 

請注意，這只是一個版本表上工作，因爲AJAX查詢具有使更新操作是從形式採取的URL。我不認爲這是一個問題，因爲在創建表單上沒有上傳照片，所以沒有什麼可以刪除的。

最後一件事，你可以使用siblings method找到兩個輸入和圖像