Wie kann die Anzahl der hochgeladenen dropzone.js-Dateien begrenzt werden?

Wie kann ich je nach Anwendungsfall die Anzahl der Dateien einschränken, die dropzone.js zulässt?

Beispielsweise muss ich möglicherweise nur 1, 2 oder 4 Dateien hochladen.

Es ist nicht uploadMultiple. uploadMultipleGilt leider nur für die Anzahl der pro Anfrage bearbeiteten Dateien.

Das habe ich etwas anders erreicht. Ich entferne die alte abgelegte Datei jedes Mal, wenn eine neue Datei hinzugefügt wird. Es dient als Überschreiben der Datei, die die Benutzererfahrung war, die ich hier anstrebte.

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]);
      }
    });
  }
};

Nowell wies darauf hin, dass dies ab dem 6. August 2013 behoben wurde. Ein Arbeitsbeispiel, das dieses Formular verwendet, könnte sein:

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

Sie könnten dieses JavaScript verwenden:

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!");
    });
  }
};

Das Dropzone-Element erhält sogar einen speziellen Stil, sodass Sie Folgendes tun können:

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

Ich dachte, dass der intuitivste Prozess zum Hochladen einzelner Dateien darin bestand, die vorherige Datei durch einen neuen Eintrag zu ersetzen .

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

maxFiles: 1erledigt den Job, aber wenn Sie auch die zusätzlichen Dateien entfernen möchten, können Sie diesen Beispielcode verwenden, der von der Wiki-Seite stammt :

Wie kann ich die Anzahl der Dateien begrenzen?

Du hast Glück! Ab 3.7.0 unterstützt Dropzone die Option maxFiles. Stellen Sie es einfach auf die gewünschte Menge ein und los geht's. Wenn Sie nicht möchten, dass die abgelehnten Dateien angezeigt werden, registrieren Sie sich einfach für das Ereignis maxfilesexceeded und entfernen Sie die Datei sofort:

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

Alternative Lösung, die für mich sehr gut funktioniert hat:

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

Sie können die Anzahl der hochgeladenen Dateien begrenzen, indem Sie in dropezone.js ändern

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

Es sieht so aus, als ob maxFiles der gesuchte Parameter ist.

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

1-set maxFiles Count "maxFiles: 1" 2- in maxfilesexceeded event Alle Datei löschen und neue Datei hinzufügen

Ereignis: Wird für jede Datei aufgerufen, die abgelehnt wurde, weil die Anzahl der Dateien das maxFiles-Limit überschreitet.

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

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

Warum verwenden Sie nicht einfach CSS, um das Klickereignis zu deaktivieren? Wenn die maximale Anzahl an Dateien erreicht ist, fügt Dropzone automatisch eine Klasse der erreichten dz-max-Dateien hinzu.

Verwenden Sie CSS, um das Klicken auf Dropzone zu deaktivieren:

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

Gutschrift: diese Antwort

Das Problem mit den bereitgestellten Lösungen ist, dass Sie immer nur 1 Datei hochladen können. In meinem Fall musste ich jeweils nur 1 Datei hochladen (per Klick oder Drop).

Das war meine Lösung ..

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

Hoffe das hilft ;)

Ich möchte darauf hinweisen. Vielleicht passiert mir das jedoch JEDOCH, wenn ich this.removeAllFiles () in dropzone verwende, löst es das Ereignis COMPLETE aus und dies bläst. Ich habe überprüft, ob die fileData leer waren oder nicht, damit ich das Formular tatsächlich senden konnte.

Sie können auch Rückrufe hinzufügen - hier verwende ich Dropzone für 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);
        });
    }
};