Bibek Sharma Bibek Sharma - 1 month ago 10
Javascript Question

Reinitialize/Reset dropzone after form is submitted

I'm using the dropzone.js to upload image on ruby on rails .Here is my HTML code

<div class="row">
<div class="col-md-12" id="drop-zone-container">
<%= form_tag '/settlement_proofs', method: :post, class: 'dropzone form', id: 'media-dropzone' do %>
<div class="fallback">
<%= file_field_tag 'attachment', multiple: true%>
</div>
<% end %>
</div>
</div>


and I initialized dropzone as

$("#media-dropzone").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 () {

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

this.on("error", function (file, message) {
$('#settlement_proof_status span').text(message).fadeIn();
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});
$('#settlement_invoice_submit_btn').click(function () {
$("#new_settlement_invoice").submit();
});
$('#uploaded_attachment').change(function () {
if (this.value.length == 0) {
this.removeAllFiles();
}
});
}
});


After I submit the form through AJAX, I need the dropzone field to reset with the default image.

Answer

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