带有Rails的Dropzonejs从页面中删除文件

Question

我正在使用carrierwave和dropzonejs。一切似乎都很好，但是当我试图按下去除图片按钮时，即使它从数据库中删除，图片仍保留在容器上。

这是它的样子;

当我点击删除所有文件链接时，它就变成了;

所以我点击了所有删除文件按钮，它们将从数据库中删除，但仍保留在页面上。我认为这是因为下面的js代码（结束部分），

<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]",

        acceptedFiles: "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){
            //location.reload();
            //removeFile(file); *******THIS DOES NOT WORK*******
            // 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(file){




                }
            });
        }
    }); 
});



</script>

图片控制器，如果有人想知道，

class PicturesController < ApplicationController
  before_action :logged_in_user
  before_filter :load_parent



  def new
    @picture = @boat.pictures.new
    @pictures = @boat.pictures.all 
  end

  def show
    @picture = @boat.pictures.find(params[:id])
  end


  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


  def edit
    @picture = Picture.find(params[:id])
  end

  def update
    @picture = @boat.pictures.find(params[:id])

    if @picture.update_attributes(picture_params)
      flash[:notice] = "Successfully updated picture."
      render 'index'
    else
      render 'edit'
    end
  end

  def destroy

    @picture = @boat.pictures.find(params[:id])
    if @picture.destroy
     render json: { message: "File deleted from server" }

      #redirect_to new_boat_picture_path(@boat, @picture)
      flash[:notice] = "Successfully destroyed picture."
    else
      render json: { message: @picture.errors.full_messages.join(',') }
    end
    #flash[:notice] = "Successfully destroyed picture."
    #redirect_to new_boat_picture_path(@boat, @picture)
    #redirect_to boat_pictures_path(@boat)
    #redirect_to boat_path(@boat)
  end




  private

    def picture_params
      params.require(:picture).permit(:name, :image)
    end

    def load_parent
     @boat = Boat.find(params[:boat_id])
    end





end

Answer 1

在删除ajax调用成功方法

中写下以下行

$(file.previewTemplate).fadeOut()