Reset Dropzone after file are uploaded

Question

I am using dropzone.js to uploads images to my php server. I have used jquery ajax call to save the form after all images are uploaded.

Now, i want to clear the dropzone div when form values are saved on the server. I have tried removeAllFiles() , but it removes files from server too.

I have googled so many times but not getting any right idea. Please provide any help if anyone knows . Thanks in advance!!!

Answer 1

You can add event handler to "queuecomplete" of the dropzone. In this handler, do whatever you want. In the example, I reload all uploaded files, and removeAllFiles().

Dropzone.options.myAwesomeDropzone = {
  init: function(){
      var th = this;
      this.on('queuecomplete', function(){
          ImageUpload.loadImage();  // CALL IMAGE LOADING HERE
          setTimeout(function(){
              th.removeAllFiles();
          },5000);
      })
  },
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB       
  acceptedFiles: 'image/*',

};

Answer 2

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