How can I reset the dropzone in this code?

Question

Dropzone.options.imageFile = {
    url: HOST_NAME + USER_NAME + BUILDER_API +'image/',
    method: 'POST',
    // enter code here
    acceptedFiles: '.jpg, .jpeg, .png',
    paramName: "imagefile", // The name that will be used to transfer the file
    maxFilesize: 10, // MB
    //addRemoveLinks: true,
    maxFiles: 2,
    init: function() {
        this.on("success", function(file, response) {
            image_id = response.id;
            IMAGES.push(image_id);
            check_files();
        }),
        this.on("removedfile", function(file, response){
            data = JSON.parse(file.xhr.response);
            alert(data['id']);
        });
    },
};

What I have to do to reset the dropzone completely?

Answer 1

Not 100% sure I understood the question, but I presume you want to be able to reuse the dropzone instance from its original state.

Technically you want to call removeAllFiles() and that will remove all the files.

Here is an example that shows you how to add a remove all files with one button: Remove all files with one button

Also, there were other people trying to do the same thing that you are looking for: Reset dropzone to Pristine state

Answer 2

This is the answer to that question and many like it on stackoverflow... to removeAllFiles on a NON-programmatically created dropzone (http://www.dropzonejs.com/#configuration), you'd execute (using the OP's ID):

 var myDropzone = Dropzone.forElement("#imageFile");
 myDropzone.removeAllFiles();

The problem is that this does NOT put the nice "upload an image here" message back for me - just leaves an inexplicable white box - one more step to fix that.

 $(".dz-message").removeClass("hidden");

That will show the original message.

Answer 3

I create a button and put this code. when clicking on the button, it's hidden and your dropzone is seen like a page refresh.

$("#btn").click(function () {
    $('#btn').hide();
    $('.dropzone')[0].dropzone.files.forEach(function(file) {
        file.previewTemplate.remove();
    });

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