Закрыть Dropzone при нажатии кнопки "Сохранить"

введите описание изображения здесь

Я использую плагин Dropzone для загрузки изображений, и у меня есть небольшая проблема с ним. После нажатия кнопки "Сохранить" файлы POST отправляются на сервер, но всплывающее окно по-прежнему отображается в браузере. Итак, мне интересно, если это нормальное поведение плагина, и если нет, могу ли я прослушать событие нажатия на кнопку "Сохранить" и закрыть всплывающее окно после него?

РЕДАКТИРОВАНИЕ

Мой HTML

<div class="modal resource-creator-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Resource</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button form="resource-creator" type="reset" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button form="resource-creator" type="submit" class="btn btn-success" data-loading-text="Proceed...">Save</button>
            </div>
        </div>
    </div>
</div>

Инициализация Dropzone

initFileUpload: function() {
    if (this.dropzone) return;

    this.dropzone = new Dropzone(this.$('.dropzone-box').get(0), {
        url: this.options.url.fileUpload,


addRemoveLinks : true,
            maxFiles: 1,
            acceptedFiles: '.jpg, .mp4',
            dictResponseError: "Can't upload file!",
            thumbnailWidth: 138,
            thumbnailHeight: 120,

            previewTemplate: $('#drop-item-preview').html()
        });

        this.dropzone.on('complete', this._onUploadFileComplete.bind(this));
    }

1 ответ

Решение

Так как вы не смогли опубликовать полные коды, относящиеся к загрузчику, вы не можете предложить решение, основанное на загрузчике. Но, если вы понимаете приведенный ниже код, вы сможете достичь того, что вы пытаетесь.

this.on("complete", function (file) {
    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
        // Some options to hide the Container or Modal
        $('#file-uploader-container').hide(); // If the uploader is in a Container hide it
        $('#file-uploader-modal').hide(); //If your uploader is in a Bootstrap modal, hide it by applying Display none on the Modal.
        $('#file-uploader-modal').modal('hide'); //By closing modal programmatically. 
        $('#file-uploader-modal #btn-close').trigger('click');  // By triggering Modal's close button (give an ID to call it)
    }
});

В зависимости от ваших потребностей примените скрипт к контейнеру или модалу. Жаль, что это решит вашу проблему.

Другие вопросы по тегам