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>');

Korns

Answer 1

You can try this:

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

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

Yearround

removeFile()/removeAllFiles() delete uploaded files from the server-side too, which is not what the topic starter is asking for. – Mcmahan

@MikeB.: Are you sure? The docs says "If you want to remove an added file from the dropzone, you can call .removeFile(file)." From what I understand it only affects the dropzone. The method triggers the removedfile event which "you can listen to... and delete the file from your server if you want to." Deleting the file from the server seems to be optional. Correct me if I'm worng... – Yearround

I not sure for 100%, but I experienced the phenomenon when removeFile() removed it from the server as well out-of-box (I didn't cared about removefile event particularly) and than I saw it: https://mcmap.net/q/523956/-clear-dropzone-js-thumbnail-image-after-uploading-an-image . So, perhaps, this point worth additional attention. – Mcmahan

If you have "addRemoveLinks" enabled and dropzone-removed-file callback to remove the uploaded file from server using an api call, then calling removeFile()/removeAllFiles() will make the API call and will delete files from server as well. In such scenarios, (When you dont want the delete API call to happen ) use https://mcmap.net/q/523956/-clear-dropzone-js-thumbnail-image-after-uploading-an-image – Pallium

it user selects multiple file it'll not work, right? – Rattler

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');

Tempo

can you tell me where to add this? I am new to flask – Buss

Answer 3

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

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

Shippy

It will delete uploaded files from the server-side too, while the TS asks how to clear the dropzone file field (from thumbnails), and not how to remove already uploaded file. – Mcmahan

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

Korns

Sorry but this is a terrible solution. The other two answers using the provided removeFile() and removeAllFiles() methods are correct and will cause less headaches down the road. The internal file counter will not reset when doing this. – Inroad

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

Manella

Answer 6

It is very simple if you listen complete event in your dropzone options:

const dropZoneOptions = {
        url: ...,
        // complete event
        complete: function(file) {
          setTimeout(() => {
            this.removeFile(file); // right here after 3 seconds you can clear
          }, 3000);
        },
      }

Juggernaut

Answer 7

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

Above works for me

Annalist

Answer 8

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

Statism

Answer 9

Another way of clear those thumbnails

Dropzone.prototype.removeThumbnail = function () {
    $(".dz-preview").fadeOut('slow');
    $(".dz-preview:hidden").remove();
};

then you call it like this:

{your_dropzone}.removeThumbnail();

Downturn