Wie Abbrechen/Abbrechen des Uploads in Dropzone.js, wenn die Bedingung nicht erfüllt ist?

Question

Ich verwende Dropzone.js, um Dateien hochzuladen. Jetzt möchte ich überprüfen, ob ein Feld ausgefüllt ist oder nicht, und wenn dies nicht der Fall ist, brechen Sie den Upload ab.

Mein HTML-Code:

<input type="text" name="title" id="title" placeholder="Type the title of the album"> 
<form action="file-upload.cgi" enctype="multipart/form-data" class="dropzone" id="dropzoneform"></form> 

Mein jQuery-Code:

Dropzone.autoDiscover = false; 
$('.dropzone').dropzone({ 
    acceptedFiles: 'image/jpeg', 
    init: function() { 
     this.on('sending', function() { 
      if ($('#title').val().length > 0) { 
       // just start automatically the uploading 
      } else { 
       // need a code to cancel the uploading 
      } 
     } 
    } 
}); 

Wie kann ich das Hochladen abzubrechen, wenn die #title ‚s Länge 0 ist?

Answer 1

Was ist mit diesem

Dropzone.autoDiscover = false; 
$('.dropzone').dropzone({ 
    acceptedFiles: 'image/jpeg', 
    init: function() { 
     var that = this; 
     that.on('sending', function(file) { 
      if ($('#title').val().length <= 0) { 
       that.removeFile(file); 
      } 
     } 
    } 
}); 

Answer 2

Die akzeptierte Antwort funktioniert, wenn Sie die Datei vollständig entfernen möchten; Wenn Sie jedoch dem Benutzer die Möglichkeit geben möchten, dieselbe Datei erneut zu senden, ohne sie erneut in Dropzone einfügen zu müssen, müssen Sie einige Änderungen an der Verarbeitung von Dateien vornehmen.

Zuerst müssen Sie die autoQueue Eigenschaft auf false gesetzt, wenn Sie Ihre Dropzone initialisieren:

$('.dropzone').dropzone({ 
    autoQueue: false, 
    /* The rest of your configuration options */ 
}); 

Dies verhindert, dass Dropzone automatisch jede Datei direkt nach dem es durch den Benutzer zu laden versuchen, hinzugefügt wird. Das bedeutet, dass jetzt müssen Sie die Dateien tatsächlich selbst programmatisch einreihen, die folgende Funktion:

var yourDropzone = $('.dropzone'); 
yourDropzone.on("addedfile", function(file) { 
    if (/* some condition is met by your file */) { 
     yourDropzone.enqueueFile(file); 
    } 
} 

Auf diese Weise, wenn der Benutzer eine Datei zum Hochladen auswählt, können wir überprüfen, ob einige beliebige Bedingung erfüllt ist. Nur wenn dies zutrifft, fügen wir die Datei in die Warteschlange für den Upload auf den Server ein. Der Vorteil dieses Ansatzes besteht darin, dass wir jetzt wählen können, wann die Datei hochgeladen wird, anstatt zu versuchen, sie aus der Warteschlange zu entfernen, während Dropzone versucht, die eingereihten Dateien zu senden.

Dies ermöglicht auch andere zierliche Funktionen; Zum Beispiel das Hinzufügen einer Schaltfläche für jede Datei, mit der der Benutzer auswählen kann, wann er es hochladen und hochladen möchte.

Answer 3

Wenn die Lösung der akzeptierten Antwort dieser Fehler werfen:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Versuchen

myDropzone.on("addedfile", function(file) { 
if (/* some condition is NOT met by your file */) { 
    myDropzone.removeFile(file); 
}}); 

Es ist eine Mischung zwischen akzeptierter Antwort und Antwort des Protossoario. Ohne Warteschlange der Datei. Die angenommene Antwort wirft tatsächlich diesen js-Fehler in meine Konfiguration.