Clear dropzone.js thumbnail image after uploading an image

Question

I have using dropzone.js in mvc by following this tutorial for uploading images but after uploading the image the thumbnail image still showing and I need it to be removed after every time I upload an image.

I have tried to replace the generated HTML after uploading the image using jQuery but it not showing correctly as the first time I need to refresh the page to show correctly but I don't want to do that.

 $("#ImageUpload").replaceWith('<form action="/Products/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone dz-clickable" id="dropzoneForm">'
 +'<div class="fallback">'
 +'<input name="file" type="file" multiple />'
 +'<input type="submit" value="Upload" />'
 +'</div>');

Answer 1

You can try this:

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

More information here: http://www.dropzonejs.com/#dropzone-methods

Answer 2

removeAllFiles() and removeFile() will trigger the server-side removal too, if you hooked Dropzone to remove files as well.

The solution to clear it only client-side, remove the file preview, and if you had a blank state message, remove the dz-started class to prevent the Dropzone CSS from hiding it:

$('.dropzone')[0].dropzone.files.forEach(function(file) { 
  file.previewElement.remove(); 
});

$('.dropzone').removeClass('dz-started');

Answer 3

Another option (similar to answer of Giraldi, but then when all files are completed):

myDropzone.on("queuecomplete", function () {
    this.removeAllFiles();
});

Answer 4

it was actually an easy thing to do but some time it go hard so i just delete the dropzone generated code using jquery and add a button with 'id = btnCreate' then

 $('#btnCreate').click(function () {
        $('div.dz-success').remove();
   });

and when i upload the thumbnail image removed after i click the button

Answer 5

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 as mentioned in the primary answer on this thread 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...

Answer 6

docsDropzone.on('complete', function (response)
{
   $(".dz-preview").remove();
});

Above works for me

Answer 7

try this on your library dropzone dropzone.js; but set time out to auto close 2500

success: function(file) {
  if (file.previewElement) {
    return file.previewElement.classList.add("dz-success"),
    $(function(){
      setTimeout(function(){
        $('.dz-success').fadeOut('slow');
      },2500);
    });
  }
},