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

78

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.

pydanny
quelle
1
Verwenden Sie maxFiles. Das wird helfen
Uday Hiwarale
Eigentlich maxFilesist die Antwort auf diese Frage, es ist nicht nötig, mehr Code zu schreiben. Vielen Dank.
Deepcell

Antworten:

160

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]);
      }
    });
  }
};
oneirois
quelle
4
Das funktioniert wirklich gut. Die anderen Antworten nicht. Sie können die gleiche Arbeit auch direkt in der Accept-Funktion ausführen. this.filesexistiert auch dort. Dies würde den Code etwas verkürzen.
Tom
wo man diesen Code in dropzone.js oder HTML-Codes einfügt, wo das Formular platziert ist
1
Dies ist eine großartige Antwort auf eine andere Frage (So überschreiben Sie eine zuvor hochgeladene Datei).
Rosa
Nachdem ich die anderen Antworten ausprobiert habe, ist dies die einzige, die genau so funktioniert hat, wie ich es wollte. Sollte Antwort akzeptiert werden, imho.
jszobody
1
Für mich in aktuellem Chrome ist Dateien [1], undefinedwenn nur eine Datei vorhanden ist, sodass die if-Bedingung immer true zurückgibt. Vielleicht einfach ändern zu if (this.files[1])?
Smoyth
77

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>
pydanny
quelle
sollte es nicht sein <form class="dropzone" id="myAwesomeDropzone"></form>?
MK Yung
2
@MKYung Ich weiß, dass dies fast ein Jahr nach der Tat ist, aber der Ausweis wird von Dropzone gezogen und Enyo macht den Kamelfall für Sie. Es ist also viel einfacher, es anzurufen. (Kann zunächst natürlich etwas verwirrend sein ... aber es funktioniert, damit ich mich nicht beschwere.)
Cayce K
2
Das funktioniert gut, wenn Sie 1 Datei und dann die nächste hinzufügen. Wenn Sie jedoch mehrere Dateien auf Ihrem Computer auswählen und alle in das Dropzone-Formular ziehen, werden alle hinzugefügt. Wie kann man das verhindern?
trs
70

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);
    }
})
Yuji 'Tomita' Tomita
quelle
2
Das hat bei mir nicht funktioniert - aber die andere Antwort von @oneirois.
Robert Dodd
Vielen Dank für diesen Hinweis, das habe ich gesucht. Vergessen Sie auch nicht, gegebenenfalls die Dateiserverseite beizubehalten (dh die vorherige Datei wird gelöscht).
Pierre de LESPINAY
Dies funktioniert nicht, wenn autoProcessQueue false ist. Es wird jedoch ausgelöst, wenn maxFiles 0 und autoProcessQueue false ist. Dies muss ein Fehler sein.
Daantje
2
Hat für mich einwandfrei
funktioniert
+1 Diese Antwort ist eine viel bessere Lösung für den Endbenutzer. Funktioniert gut mit der init: function(){ this.on('maxfilesexceeded', function(file){ this.removeAllFiles(); this.addFile(file); }); }Option in meinem Projekt , auch mit der hinzugefügten Option autoProcessQueue: false.
RNickMcCandless
34

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);
});
Leniel Maccaferri
quelle
2
So viel unterschätzte Antwort.
Saad Suri
9

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

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

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

vipinlalrv
quelle
Weitere dieser Optionen können hier eingesehen werden: dropzonejs.com/#configuration-options
Jordanien
2

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);
});
shab
quelle
1

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

Timmy Von Heiss
quelle
0

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

SimonDepelchin
quelle
0

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.

Lucas Gabriel
quelle
0

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);
    }
}
Makah
quelle
-1
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);
        });
    }
};
ragesh pp
quelle