Initialisieren/Zurücksetzen dropzone nach der form vorgelegt wird,

Ich bin mit dem dropzone.js upload Bild auf ruby on rails .Hier ist mein 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>

und ich initialisiert dropzone als

$("#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();
            }
        });
    }
});

Nachdem ich senden Sie das Formular über AJAX, muss ich die dropzone Feld zurücksetzen mit dem Standard-Bild.

Mögliche Duplikate von stackoverflow.com/questions/21702526/...
In Ihrem angegebenen link, wird der Benutzer mit div statt-Formular um die Daten zu veröffentlichen.Hier In meinem Fall bin ich mit form

InformationsquelleAutor Bibek Sharma | 2015-07-13

19
```
this.on("complete", function(file) { 
   this.removeAllFiles(true); 
})
```
schreiben Sie den obigen code in INIT Funktion.

diese entfernt alle Dateien in die dropzone und SETZT die dropzone in den ursprünglichen Zustand.

http://www.dropzonejs.com/#event-reset

Ich habe bereits versucht, es herauszufinden.Aber ich weiß nicht, warum removeAllFiles(true) löscht die Datei vom server als auch

InformationsquelleAutor J Santosh

Schließlich, ich löste das Problem selbst.
Zuerst Entferne ich die form von seinem Eltern-element.Es entfernt die vorhandenen dropzone Instanz.Dann erstelle ich das Formular mit jQuery und reinitialisieren der dropzone wieder.
Hier ist mein vollständiger 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;
    }
});

InformationsquelleAutor Bibek Sharma

Versuchen Sie dies:

//DropZone Initiation Section
init: function() {
    this.on('success', function(file, json) {
    });

    this.on('addedfile', function(file) {
    });

    this.on('drop', function(file) {
    });

    this.on('removedfile', function(file) {
    });

    this.on('complete', function(file) {
    });

    this.on('error', function(file) {
    });

    this.on('resetFiles', function() {
        if(this.files.length != 0){
            for(i=0; i<this.files.length; i++){
                this.files[i].previewElement.remove();
            }
            this.files.length = 0;
        }
    });
}

function JS_ClearDropZone() {
    //DropZone Object Get
    var objDZ = Dropzone.forElement("div#objDropzone");
    //"resetFiles" Event Call
    objDZ.emit("resetFiles");
}

InformationsquelleAutor Senug Nam Kim

2

Jede Antwort hier ist unglaublich kompliziert. Ich habe eine dropzone in einem modal mit einigen ajax zu ziehen, die hochgeladen/komplette Datei auf der Seite. Wenn der Benutzer fügt ein WEITERES Bild in die Galerie, ich wollte zurücksetzen, um die dropzone in modalen, ohne die Seite aktualisieren. Die Antwort? Siehe meine Lösung hier https://stackoverflow.com/a/45247184/179571

InformationsquelleAutor Scott

Nahm ich ein Beispiel aus beiden Senug Nam Kim und J Santosh:

//Where .reset-dz is the class of a button
$('.reset-dz').on('click', function(e){
    var myDropzone = Dropzone.forElement("#user-post-submit");
    myDropzone.removeAllFiles(true); 
});

InformationsquelleAutor JacobRossDev

0

Eine einfache Lösung auf der Skript. Für die version 5.4.0
1. Fügen Sie ihn in Ihr script, was die Verbindung dropzone.js
$('button#submit_button').click(function () { $('.dz-preview').empty(); $('.dz-message').show(); });
1. Und in dropzone.js Zeile hinzufügen >>> $('.dz-Nachricht').hide();
  
  vor der Rückkehr _this3.updateTotalUploadProgress(); (Zeile 1277)
this.on("uploadprogress", function () { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });

InformationsquelleAutor user_ivanp

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.