web-dev-qa-db-ja.com

フォームの送信後にドロップゾーンを再初期化/リセット

dropzone.js を使用してRuby on Railsに画像をアップロードしています。これが私のHTMLコードです。

<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>

ドロップゾーンを次のように初期化しました

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

AJAXを介してフォームを送信した後、dropzoneフィールドをデフォルトの画像にリセットする必要があります。

javascriptjqueryruby-on-railsdropzone.js
6
Bibek Sharma

最後に、私は自分で問題を解決しました。最初に、親要素からフォームを削除します。既存のドロップゾーンインスタンスを削除しました。次に、jQueryを使用してフォームを作成し、ドロップゾーンを再初期化します。これが私の完全なコードです

 // 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;
    }
});
4
Bibek Sharma
this.on("complete", function(file) { 
   this.removeAllFiles(true); 
})

上記のコードをINIT関数に記述します。

これにより、ドロップゾーン内のすべてのファイルが削除され、ドロップゾーンが初期状態にリセットされます。

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

21
J Santosh

これを試して：

//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");
}
4
Senug Nam Kim

ここでのすべての答えは非常に複雑です。アップロードされた/完全なファイルをページに描画するためのいくつかのajaxを備えたモーダルのドロップゾーンがあります。ユーザーがギャラリーに別の画像を追加した場合、ページを更新せずにそのモーダルのドロップゾーンをリセットしたいと思いました。答え？ここで私の解決策を参照してください https://stackoverflow.com/a/45247184/179571

3
Scott

私はSenugNamKimとJSantoshの両方から例を取りました。

// 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); 
});
1
JacobRossDev

スクリプトに基づいて構築されたシンプルなソリューション。バージョン5.4.0の場合

  1. Dropzone.jsを接続するスクリプトに追加します

$('button#submit_button').click(function () { $('.dz-preview').empty(); $('.dz-message').show(); });

  1. そしてdropzone.jsに行を追加します>>> $（ '。dz-message'）。hide（）;

    戻る前に_this3.updateTotalUploadProgress（）; （1277行目）

this.on("uploadprogress", function () { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });

0
Ivan Pirus