Як обмежити кількість завантажених файлів dropzone.js?

Залежно від випадку використання, як обмежити кількість файлів, які дозволить dropzone.js?

Наприклад, мені може знадобитися дозволити лише 1, 2 або 4 завантажені файли.

Це не так uploadMultiple. На жаль, це uploadMultipleстосується лише кількості оброблених файлів за запитом.

Я домігся цього дещо по-іншому. Я просто видаляю старий випав файл при кожному додаванні нового файлу. Це діє як перезаписування файлу, що було тим досвідом роботи, для якого я тут ходив.

Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("addedfile", function() {
      if (this.files[1]!=null){
        this.removeFile(this.files[0]);
      }
    });
  }
};

Ноуелл зазначив, що це було розглянуто станом на 6 серпня 2013 р. Робочим прикладом використання цієї форми може бути:

<form class="dropzone" id="my-awesome-dropzone"></form>

Ви можете використовувати цей JavaScript:

Dropzone.options.myAwesomeDropzone = {
  maxFiles: 1,
  accept: function(file, done) {
    console.log("uploaded");
    done();
  },
  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!");
    });
  }
};

Елемент dropzone навіть набуває особливого стилю, тому ви можете робити такі речі:

<style>
  .dz-max-files-reached {background-color: red};
</style>

Я вважав, що найбільш інтуїтивно зрозумілий процес завантаження одного файлу - це заміна попереднього файлу на новий запис.

  $(".drop-image").dropzone({
    url: '/cart?upload-engraving=true',
    maxFiles: 1,
    maxfilesexceeded: function(file) {
        this.removeAllFiles();
        this.addFile(file);
    }
})

maxFiles: 1виконує роботу, але якщо ви також хочете видалити додаткові файли, ви можете скористатися цим зразком коду, взятим зі сторінки Вікі :

Як можна обмежити кількість файлів?

Вам пощастило! Починаючи з 3.7.0 Dropzone підтримує опцію maxFiles. Просто встановіть потрібну кількість, і все готово. Якщо ви не хочете, щоб відхилені файли переглядалися, просто зареєструйтесь для події maxfilesexceeded і негайно видаліть файл:

myDropzone.on("maxfilesexceeded", function(file)
{
    this.removeFile(file);
});

Альтернативне рішення, яке для мене дуже добре працювало:

init: function() {
    this.on("addedfile", function(event) {
        while (this.files.length > this.options.maxFiles) {
            this.removeFile(this.files[0]);
        }
    });
}

Ви можете обмежити кількість завантажених файлів, змінивши файл dropezone.js

Dropzone.prototype.defaultOptions = {maxFiles: 10,}

схоже, maxFiles - це параметр, який ви шукаєте.

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

1-set maxFiles Count "maxFiles: 1" 2- у maxfilesexceeded event Очистити весь файл і додати новий файл

подія: Викликається для кожного файлу, який було відхилено, оскільки кількість файлів перевищує обмеження maxFiles.

    var myDropzone = new Dropzone("div#yourDropzoneID", { url: "/file/post", 
 uploadMultiple: false, maxFiles: 1 });

myDropzone.on("maxfilesexceeded", function (file) {
    myDropzone.removeAllFiles();
    myDropzone.addFile(file);
});

Чому б вам просто не використовувати CSS, щоб вимкнути подію кліку. Коли досягнуто максимальних файлів, Dropzone автоматично додасть клас dz-max-files-dosegnut.

За допомогою css вимкніть клацання на dropzone:

.dz-max-files-reached {
          pointer-events: none;
          cursor: default;
}

Кредит: ця відповідь

Проблема запропонованих рішень полягає в тому, що ви можете завантажити лише 1 файл. У моєму випадку мені потрібно було завантажувати лише 1 файл за раз (при натисканні або падінні).

Це було моє рішення ..

    Dropzone.options.myDropzone = {
        maxFiles: 2,
        init: function() {
            this.handleFiles = function(files) {
                var file, _i, _len, _results;
                _results = [];
                for (_i = 0, _len = files.length; _i < _len; _i++) {
                    file = files[_i];
                    _results.push(this.addFile(file));
                    // Make sure we don't handle more files than requested
                    if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
                        break;
                    }
                }
                return _results;
            };
            this._addFilesFromItems = function(items) {
                var entry, item, _i, _len, _results;
                _results = [];
                for (_i = 0, _len = items.length; _i < _len; _i++) {
                    item = items[_i];
                    if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) {
                        if (entry.isFile) {
                            _results.push(this.addFile(item.getAsFile()));
                        } else if (entry.isDirectory) {
                            _results.push(this._addFilesFromDirectory(entry, entry.name));
                        } else {
                            _results.push(void 0);
                        }
                    } else if (item.getAsFile != null) {
                        if ((item.kind == null) || item.kind === "file") {
                            _results.push(this.addFile(item.getAsFile()));
                        } else {
                            _results.push(void 0);
                        }
                    } else {
                        _results.push(void 0);
                    }
                    // Make sure we don't handle more files than requested
                    if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) {
                        break;
                    }
                }
                return _results;
            };
        }
    };

Сподіваюся, це допомагає;)

Я хотів би зазначити. можливо, це просто трапляється зі мною, ВСЯГО, коли я використовую this.removeAllFiles () у dropzone, він запускає подію ЗАВЕРШЕНО, і це дме, що я зробив, це перевірив, чи є дані fileData порожніми чи ні, щоб я міг фактично надіслати форму.

Ви також можете додати зворотні дзвінки - тут я використовую Dropzone для Angular

dzCallbacks = {
    'addedfile' : function(file){
        $scope.btSend = false;
        $scope.form.logoFile = file;
    },
    'success' : function(file, xhr){
        $scope.btSend = true;
        console.log(file, xhr);
    },
    'maxfilesexceeded': function(file) {
         $timeout(function() { 
            file._removeLink.click();
        }, 2000);
    }
}

Dropzone.options.dpzSingleFile = {
    paramName: "file", // The name that will be used to transfer the file
    maxFiles: 1,
    init: function() {
        this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
        });
    }
};