Как вызвать функцию .removeAllFiles() в Dropzone.js после нажатия кнопки

Я использую библиотеку http://www.dropzonejs.com/ (dropzone.js). Я инициализировал один из элементов формы, как

   var drop = $("#upload").dropzone({
                uploadMultiple: "true",
                addRemoveLinks: "true",
                thumbnailWidth: "250",
                thumbnailHeight: "250",
                maxFilesize: "10",
                headers: {
                    "title": titles,
                    "location": locations,
                    "tag": tags
                    }                   
            });

Теперь, когда пользователь нажимает кнопку <button id="close"></button>, я хочу очистить весь список, используя функцию drop.removeAllFiles(true), как показано на официальном сайте Dropzone.js.

Итак, я попытался использовать

 $("#close").click(function(){
      drop.removeAllFiles(true);
   });

Но он не работает, In console.log Я получаю сообщение об ошибке removeAllFiles() is not declared for drop.

Где я ошибаюсь?

Ответы

Ответ 2

Вот код, он решит вашу проблему.

$(function() {
            Dropzone.options.myAwesomeDropzone = { 
            init: function () {
                var myDropZone = this;
                $("#btnRemoveAll").click(function () {
                            myDropZone.removeAllFiles();
                        }
                );
            }

        };
 });

Ответ 3

Ваш drop ссылается на объект jQuery, а не на объект Dropzone.

var drop = $("#upload").dropzone(options);

Иногда необходимо использовать jQuery (селектор [, контекст]) с dropzone. Поэтому конструктор не jquery не так удобен.

var drop = new Dropzone(selector, options);

Вместо этого вы можете получить объект Dropzone с (уродливым):

var drop = $("#upload").dropzone(options).get(0).dropzone;

$("#close").click(function(){
    drop.removeAllFiles(true);
});

Ответ 4

Попробуйте это. Это также включает вызовы JSON на сервер для удаления файлов.

mydropzone = new Dropzone("#mydropzone",{
    url: "/dropzone",
    addRemoveLinks : true,
    maxFilesize: 2.0,
    dictResponseError: 'Error uploading file!',
    removedfile: function(file) {
        var name = {file: file.name}
        $.ajax({
            type: 'POST',
            url: '/dropzone_delete',
            contentType: 'application/json',
            data: JSON.stringify(name),
            dataType: 'json',
            success: function (e) {console.log(e);}
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
    }   
});

// Clear all files
$("#btn_clear_dropzone").click(function () {
    // Delete existing files
    mydropzone.removeAllFiles();
    // Cancel current uploads
    mydropzone.removeAllFiles(true);
});

Пожалуйста, дайте мне знать, есть ли у людей предложения по дальнейшему уточнению этого кода.

Ответ 5

Это работает... Пожалуйста, попробуйте это.

$("#close").click(function(){
    drop.removeAllFiles(true);
});
$("#upload").dropzone({
            uploadMultiple: "true",
            addRemoveLinks: "true",
            thumbnailWidth: "250",
            thumbnailHeight: "250",
            maxFilesize: "10",
            headers: {
                "title": titles,
                "location": locations,
                "tag": tags
                },
            init: function () {
       var dropzone = this;
       $("#close").click(function(){
  dropzone.removeAllFiles(true);
});
    }


        });