Question

21

Reinitialize/Reset dropzone after form is submitted

rated 0 times [ 23] [ 2] / answers: 1 / hits: 41117 / 9 Years ago, mon, july 13, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lewis

Add To Favorites

Follow

Total Points: 739

Total Questions: 100

Total Answers: 94

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 9 Years ago kalias · Accepted 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;

    }

});