Remove previews from dropzone after success

Question

I want to rollback the original dropzone with its message "drop files here" after the success event of dropzone or after the complete event of dropzone.

I don't want to see the preview after success or complete.

This is my dropzone script:

Dropzone.options.myAwesomeDropzone = {

  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  parallelUploads: 1,
  success: function(file, response) {
    var imageSrc = response;
    $(".img-responsive").attr('src', imageSrc);
    if (imageSrc == '/assets/images/offerfeatimg.jpg') {
      $(".removebutton").hide();
    } else {
      $(".removebutton").show();
    }
  }
};

Answer 1

Leveraging @kkthxby3 's idea, the innerHTML for the thumbnail can be cleared in the success method using the following code:

 success: function (file, response) {
      file.previewElement.innerHTML = "";
 }

The beauty of this approach is that it clears the thumbnail without firing the removedFile event.

This leaves the following html in the dom where the thumbnail was:

 <div class="dz-preview dz-processing dz-image-preview dz-complete"></div>

but as you can see, the div above which is responsible for displaying the thumbnail is now empty.

Another approach is to remove even the enclosing div that wraps the thumbnail along with it's contents. This approach can be accomplished with the following code in the success method and leaves no trace of the thumbnail in the dom:

 success: function (file, response) {
      file.previewElement.parentNode.removeChild(file.previewElement);
 }

Enjoy.

Answer 2

only need call method removeFile in success function

success: function (file, response) {
   this.removeFile(file);
}

check doc dropzone