Dropzone，可以从数据库中销毁但不能从其容器中销毁

Question

我有一个图片新页面，用户可以在其中上传船图片。所以 Boat model 和 Picture model 相关联，它们是嵌套路线。所以问题是，我使用 Carrierwave 和 Dropzone。写入数据库工作正常。我一直在努力处理嵌套路由的销毁操作，因为我也不是 jquery 方面的专家。所以现在，当我单击删除按钮时，它实际上会破坏数据库中的图片，但图片仍保留在 Dropzone 容器内。

这里；

这是日志输出；

>Boat.last.pictures.all
  Boat Load (0.3ms)  SELECT  "boats".* FROM "boats"  ORDER BY "boats"."id" DESC LIMIT 1
  Picture Load (0.4ms)  SELECT "pictures".* FROM "pictures" WHERE "pictures"."boat_id" = ?  [["boat_id", 137]]
=> #<ActiveRecord::AssociationRelation [#<Picture id: 645, name: nil, boat_id: 137, created_at: "2015-04-24 22:13:29", updated_at: "2015-04-24 22:13:29", image: "imgres-3.jpg">]>

然后我按删除文件，它只是向下移动了一点，而不是从那里消失；

但是从数据库中删除，重新登录；

> Boat.last.pictures.all
  Boat Load (0.4ms)  SELECT  "boats".* FROM "boats"  ORDER BY "boats"."id" DESC LIMIT 1
  Picture Load (0.3ms)  SELECT "pictures".* FROM "pictures" WHERE "pictures"."boat_id" = ?  [["boat_id", 137]]
=> #<ActiveRecord::AssociationRelation []>

所以我知道问题出在 Jquery 但也许有人正在寻找如何使用 #destroy 操作与 dropzone 一起使用。这就是为什么我想解释一下。

我的图片new.html.erb

<div class="container">

<%= form_for [@boat, @picture], html: { multipart: true, class: "dropzone", id: "picture-dropzone"} do |f| %>


      <p>

      <div class="fallback">
      <%= f.file_field :image %> 

      </div>    

      </p>

<% end %>

<p><%= link_to "Back to My Profile",  current_user %></p>


<div class="index">
  <%= render "index" %>
</div>


<script type="text/javascript">
$(document).ready(function(){
    // disable auto discover
    Dropzone.autoDiscover = false;

    // grap our upload form by its id
    $("#picture-dropzone").dropzone({
        // restrict image size to a maximum 5MB
        maxFilesize: 5,
        // changed the passed param to one accepted by
        // our rails app
        paramName: "picture[image]",
        // show remove links on each image upload
        addRemoveLinks: true,
        // if the upload was successful
        success: function(file, response){
            // find the remove button link of the uploaded file and give it an id
            // based of the fileID response from the server
            $(file.previewTemplate).find('.dz-remove').attr('id', response.fileID);
            $(file.previewTemplate).find('.dz-remove').attr('boat_id', response.boatID);
            // add the dz-success class (the green tick sign)
            $(file.previewElement).addClass("dz-success");
        },
        //when the remove button is clicked
        removedfile: function(file){

            // grap the id of the uploaded file we set earlier
            var id = $(file.previewTemplate).find('.dz-remove').attr('id'); 
            var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id'); 
            // make a DELETE ajax request to delete the file
            $.ajax({
                type: 'DELETE',
                url: '/boats/' + boat_id + '/pictures/' + id,
                success: function(data){
                    console.log(data.message);
                }
            });
        }
    }); 
});



</script>

和图片控制器；

#create 行动

def create

    @picture = @boat.pictures.new(picture_params)

    if @picture.save
    render json: { message: "success", fileID: @picture.id, boatID: @boat.id }, :status => 200

    else
      render json: { error: @picture.errors.full_messages.join(',')}, :status => 400

    end

  end

#destroy 动作；

def destroy

    @picture = @boat.pictures.find(params[:id])
    if @picture.destroy
     render json: { message: "File deleted from server" }
    else
      render json: { message: @upload.errors.full_messages.join(',') }
    end
  end

正如我所说，问题出在 jquery，删除的文件保留在那里。谢谢

Answer 1

将这两行添加到 removedfile 事件处理程序函数中：

var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

在此之后，您的处理函数应如下所示：

removedfile: function(file){

    // grap the id of the uploaded file we set earlier
    var id = $(file.previewTemplate).find('.dz-remove').attr('id'); 
    var boat_id = $(file.previewTemplate).find('.dz-remove').attr('boat_id'); 
    // make a DELETE ajax request to delete the file
    $.ajax({
        type: 'DELETE',
        url: '/boats/' + boat_id + '/pictures/' + id,
        success: function(data){
            console.log(data.message);
        }
    });

    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
}

这应该可以解决问题。

Dropzone，可以从数据库中销毁但不能从其容器中销毁

Dropzone, can destroy from database but not from its container

jquery

controller

ruby-on-rails

solution