dropzone.js check for condition before query

Question

I'm using dropzone.js to upload pictures. There is a html select list that that user needs to choose a category from before pictures are uploaded, so the CGI knows where to put them.

Is there a way to make dropzone meet a condition before it will upload, or maybe there is another way?

$(function() {          
            Dropzone.options.myAwesomeDropzone = {
       init: function () {
            var myDropZone = this;
            $("#btnRemoveAll").click(function () {
                        myDropZone.removeAllFiles();
                    }
            );
            $("#categories").change(function () {
                        myDropZone.removeAllFiles();
                    }
            );            
        },                          
              success: function(file,r){                            
                file.previewElement.classList.add("dz-success");        
                alert(r); // response from server
                // this.removeFile(file);    // remove file after upload                        

              },
              drop:function(){
                var tkn=getToken();
                $("#token").val(tkn);
                var c=$("#categories").val();
                $("#cat").val(c);
              },
              error: function(){
                ajaxError();
              },
              acceptedFiles: "image/jpeg"
            };

});     

the html:

Category:<br>
<select id="categories">
    <option value="foo">Please choose</option>  
    <option value="cat1">cat1</option>  
    <option value="cat2">cat2</option>  
</select><br>

New category :<input type="text" id="category">

<form action="cgi/uploadfile.exe"
      class="dropzone"
      id="my-awesome-dropzone">
      <input type="hidden" id="token" name="token">
      <input type="hidden" id="cat" name="cat">
</form>     
<button id="btnRemoveAll">Clear Dropzone</button>

Answer 1

You probably already found a solution, but this is what worked for me:

• add a submit button to the form
• add autoProcessQueue: false to dropzone options

• override the submit button's click event, and check your conditions before telling dropzone to process the queue:

  $('#submit_button').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
  
      if ( //check your conditions here ) {
          myDropzone.processQueue();
      } else {
         //show error     
      }
  });