Dropzonejs with Rails Delete files from the page

Question

I am using a carrierwave and dropzonejs. Everything seems fine however, when I try to press to remove picture button, even though it removes from the database, picture stays on the container.

Here how it looks like;

When I click to remove file link all of them, it becomes;

So I clicked all the remove file buttons, they are removed from the database however, stays on the page. I think it is because of the js code (end part) below,

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

pictures controller if anyone wonders,

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

write below line in your delete ajax call success method

$(file.previewTemplate).fadeOut()