Reinitialize/Reset Dropzone After Form Is Submitted

Reinitialize/Reset dropzone after form is submitted

Finally, I solved the issue myself.
At first I remove the form from its parents element.It removed the existing dropzone instance.Then I create the form using the jQuery and reinitialize the dropzone again.
Here is my complete code

 // To reset dropzone before popup load
    var resetDropzone = function () {

        $('#drop-zone-container').empty();

        var $form = makeElement('form', {
            action: window.pg.constants.url.SETTLEMENT_BASE_URL,
            method: 'post',
            id: 'settlement-proof-form',
            class: 'dropzone'
        });

        $('#drop-zone-container').append($form);

        var settlmentProofDropZone;
        $("#settlement-proof-form").dropzone({
            acceptedFiles: pg.constants.ACCEPTED_FORMAT,
            maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
            maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
            addRemoveLinks: true,
            removedfile: function (file) {
                if (file.xhr.responseText.length > 0) {
                    var fileId = JSON.parse(file.xhr.responseText).id;
                    $.ajax({
                        url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
                        method: 'DELETE',
                        dataType: "json",
                        success: function (result) {
                            $('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
                            $('#settlement_proof_status span').fadeOut(0);
                            var _ref;
                            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

                        },
                        error: function () {
                            $('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
                        }

                    });
                }

            },
            init: function () {
                settlmentProofDropZone = this;

                this.on("success", function (file, message) {
                    appendContent(message.attachment.url, message.id);
                });
            }
        });

    };

    function makeElement(element, options) {
        var $formField = document.createElement(element);
        $.each(options, function (key, value) {
            if (key === 'innerHTML') {
                $formField.innerHTML = value;
            }
            else {
                $formField.setAttribute(key, value);
            }
        });
        return $formField;
    }
});

Reset Dropzone after file are uploaded

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/*',

};

Initialize dropzone after loading the form

You should initialize dropzone programatically instead of using the options and the auto discover feature.

Should look like this:

<script>
    Dropzone.autoDiscover = false; // This is optional in this case

    $( document ).ready(function() {
        // get the mustache
        loadDropZone();

        // Now that the form is loaded you can initialize dropzone by creating an instance
        // init dropzone
        var myAwesomeDropzone = new Dropzone("form#my-awesome-dropzone", {

            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            // Dropzone settings
            init: function () {
                var myDropzone = this;

                this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sendingmultiple", function () {
                });
                this.on("successmultiple", function (files, response) {
                });
                this.on("errormultiple", function (files, response) {
                });
            }

        }

    });

    function loadDropZone() {
        $.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
            Mustache.parse(template); // speeds up future uses
            var rendered = Mustache.render(template);
            $('#block-container').append(rendered);
        });
    }
</script>

How to clear dropzone.js dropzone

Did you tried to call the "removeAllFiles" function of your dropzone object after the upload ?

See documentation : http://www.dropzonejs.com/#dropzone-methods

In the first answer of this post, the solution is also to call the "removeAllFiles" function :
removing all manually added files from Dropzone.js?

If it doesn't solve your problem, please give us more information

Dropzone.js, how to refresh the page after action url is terminated

As my dropzone form is inside another form, dropzone send the main form immediatly after file upload and do not wait for the dropzone verification process.

To prevent this, I allow the main form to be validated only if I click the submit button.

<script>
$(document).ready(function() {
    Dropzone.autoDiscover = false;

    //Avoid form to be submitted by Dropzone
    var form_clicked = false;
    $('#submit_button').click(function() {
        form_clicked = true;
    });
    $("#submit_my_form").submit(function(e) {
        if(form_clicked != true){
           e.preventDefault();
        }
    });
    // Submit the main form to refresh page after file upload
    my_dropzone.on("successmultiple", function(file, responseText) {
        $('#submit_button').click();
    });
</script>

---

Related Topics