Jak anulować/przerwać przesyłanie w Dropzone.js, jeśli warunek nie jest spełniony?

Question

Używam Dropzone.js do przesyłania plików. Teraz chcę sprawdzić, czy pole jest wypełnione, czy nie, a jeśli tak nie jest, anuluj przesyłanie.

Mój kod HTML:

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

Mój kod jQuery:

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

Jak mogę anulować przesyłanie gdy Length #title „s jest 0?

Answer 1

Co o tym

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

Odpowiedź Akceptowane działa, jeśli chcesz usunąć plik całkowicie; Jeśli jednak chcesz dać użytkownikowi opcję ponownego przesłania tego samego pliku bez konieczności ponownego dodawania go do strefy dropzone, musisz zmienić kilka rzeczy dotyczących przetwarzania plików.

Najpierw trzeba ustawić właściwość autoQueue false podczas inicjalizacji DropZone:

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

To zapobiega automatycznemu DropZone próbuje załadować każdy plik tuż po jej dodany przez użytkownika. Oznacza to, że teraz trzeba faktycznie skolejkowania pliki siebie programowo, za pomocą następujących funkcji:

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

W ten sposób, gdy użytkownik wybierze plik do przesłania, możemy sprawdzić, czy jakiś arbitralny warunek jest spełniony. Tylko wtedy, gdy jest to prawdą, dodajemy plik do przesłania na serwer.

Zaletą tego podejścia jest to, że teraz możemy faktycznie wybrać, kiedy plik zostanie pobrany, zamiast próbować usunąć go z kolejki, podczas gdy Dropzone próbuje wysłać zakolejkowane pliki.

Pozwala to również na inne funkcje hodowcy; na przykład dodanie przycisku dla każdego pliku, który pozwala użytkownikowi wybrać, kiedy spróbować go przesłać.

Answer 3

Jeśli rozwiązaniem przyjętym odpowiedzi rzucać ten błąd:

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

Spróbuj

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

To mieszanka zaakceptowanej odpowiedzi i odpowiedzi Protossoario użytkownika. Bez ustawiania w kolejce pliku. Zaakceptowana odpowiedź faktycznie rzuca ten błąd js w mojej konfiguracji.