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();
    }
  }
};

Birthplace

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.

Lackluster

Yes this works fine and also in order to show dropzone message again like ( Drop files here or click to upload.) removeClass dz-started from dropzone class element. $('.dropzone').removeClass('dz-started'); – Mccarthyism

Answer 2

only need call method removeFile in success function

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

check doc dropzone

Dehlia

Calling this.removeFile(file); will remove the preview but it also fires the removedFile event which will cause an ajax call to the server to remove the file if you have provided support for handling those events to remove uploaded files. It'd be nice to have a way to remove the thumbnail without firing off a removedFile event. – Lackluster

Answer 3

For me the easiest way to make the file preview not appear is with css.

dz-preview and dz-file-preview are a couple classes in the outer div of the preview html generated by the default template.

.dz-preview, .dz-file-preview {
    display: none;
}

I also told it to not create thumbnails in the Dropzone.options.

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2, // MB
    url: 'post_image',

    createImageThumbnails: false, // NO THUMBS!

    init: function () {
      this.on('sending', dz_sending),
      this.on('success', dz_success),
      this.on('error', dz_error),

      this.on('complete', dz_complete) // Once it's done...
    }

The template still generates all the preview html though. So in my 'complete' function dz_complete I delete it all.

function dz_complete(file) {
  $('.dz-preview').remove();  // ...delete the template gen'd html.
}

Heyes

Answer 4

Just an fyi...

The method 'removeAllFiles' is not necessarily the prime choice. Which is the same as 'removeFile(file)'.

I have an event handler for dropZone's 'removedfile' event... I'm using it to send a server message to delete the respective file from the server (should a user delete the thumbnail after it's been uploaded). Using the method 'removeAllFiles' (as well as the individualized 'removeFile(file)') fires the event 'removedfile' which deletes the uploaded images in addition to clearing the thumbnails.

So one could add some finessing around this but in the reality of it the method is not correct.

Looking through the api for Dropzone I am not seeing an API call to simply reset or clear the thumbnails... The method 'disable()' will clear the stored file names and what not but does not clear the thumbnails... Seems dropzoneJS is actually missing a critical API call to be honest.

My work around is to manually reset the containing div for dropzone:

document.getElementById("divNameWhereDropzoneClassIs").innerHTML = ""

This clears the thumbnails without firing off the event 'removedfile' which is supposed to be used for deleting an image from the server...

Portuna

Answer 5

The easiest thing is to call the dropzone removeFile() method, using an event listener for the success event.

Dropzone.options.myAwesomeDropzone = {
    paramName: "file",
    maxFilesize: 2,
    parallelUploads: 1,
    init: function() {
        this.on("success", function(file, response) {
            var imageSrc = response;
            $(".img-responsive").attr('src', imageSrc);
            if(imageSrc == '/assets/images/offerfeatimg.jpg') {
                $(".removebutton").hide();
            } else {
                $(".removebutton").show();
            }
            this.removeFile(file); // This line removes the preview
        })
    }
};

Mckeever

Answer 6

I was using file.previewElement.remove(), works fine in Chrome but does not work in IE. Then I tried this.removeFile(file), but it didn't work for me. After that i tried file.previewElement.innerHTML = "" which works in both Chrome and IE but it leaves an extra div where the preview elements were. So this one works better for me...

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

Luggage

Answer 7

If you want to remove an added file from the dropzone, you can call .removeFile(file). This method also triggers the removedfile event.

Here’s an example that would automatically remove a file when it’s finished uploading:

myDropzone.on("complete", function(file) {
  myDropzone.removeFile(file);
});

If you want to remove all files, simply use .removeAllFiles(). Files that are in the process of being uploaded won’t be removed. If you want files that are currently uploading to be canceled, call .removeAllFiles(true) which will cancel the uploads.

Oringa

Answer 8

100% Tested and Working:

$('#preview_image_container .dz-preview .dz-remove').attr('id','removeFile');
document.getElementById("removeFile").click();

Amplify