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?

Arty

Did you got your answere. I'm facing same problem – Stevana

I have the same problem - rmoveAllFiles is mentioned over and over again - how to you execute that on the item above... Dropzone.options.imageFile.removeAllFiles() does not work – Aram

Got it - see my answer below – Aram

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

Dodd

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.

Aram

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

Philippines

Simply providing code without any explanation is not very helpful. Can you give some more text, please? Also I cannot see what is the additional value regarding other answers here. – Therefrom