Dropzonejs How to send form fields and upload the

Question

I'm new in jQuery and Dropzone.js, So, my issue is that I'm unable to send form data with uploaded file. this is my code:

Form:

<form class="form-horizontal" id="validation-form" method="get">

  <div class="form-group">
    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="carrier">Carrier</label>

    <div class="col-xs-12 col-sm-6">
      <select id="carrier" name="carrier" class="select2" data-placeholder="Select...">
        <option value="">&nbsp;</option>
        <option value="FEDEX">FEDEX</option>
        <option value="UPS">UPS</option>
        <option value="DHL">DHL</option>
        <option value="USPS">USPS</option>
        <option value="Others">Others</option>
      </select>
    </div>
  </div>

Dropzone Part:

<div id="dropzone" class="dropzone alert alert-success ">
  <div class="dz-message dropzone-previews">
    <h2 lighter block green>Drag PDF.</h2>
    <span class="glyphicon glyphicon-send"></span>
  </div>
</div> 

This is my script code of the dropzone:

<script type="text/javascript" >
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    $("#dropzone").dropzone({
      url: "uploads.php",
      autoProcessQueue: false,
      previewsContainer: ".dropzone-previews",
      uploadMultiple: false,
      addRemoveLinks: false,
      //addRemoveLinks: true,
      maxFiles: 1,
      maxFileSize: 1000,
      dictResponseError: "Ha ocurrido un error en el server",
      acceptedFiles: 'application/pdf',
    });
  });
</script>

And this is the ajax that is able to send the data of the form.

submitHandler: function(form, file) {
    $("#loading").html('<img src="imagenes/cargando.gif" width="50" height="50" /><br /><a href="#">Grabando Pre-Alerta</a>');

    $.ajax({
      type: 'POST',
      url: "uploads.php",
      data: {
        carrier: $("#carrier").val(),
        store: $("#tienda").val(),
        valor: $("#valor").val(),
        descripcion_envio: $("#confirmacion").val(),
        tracking_number: $("#tracking").val()
      },
      dataType: 'json',
      success: function(data) {


        $("#loading").html('');
        if (data.resultado == "false") {
          $('#texto_popup_error').html("Usuario o contraseña incorrectos");
          $('#errorIngreso').modal('show')
        } else {
          if (data.no_prealerta == "0") {
            $('#texto_popup_error').html("Error al grabar la PreAlerta o bien ya fue grabada. Intente de nuevo. Si tiene el mismo error su Tracking Number ya fue grabado.");
            $('#errorIngreso').modal('show')
          } else {
            document.getElementById("tienda").value = "";
            document.getElementById("valor").value = "";
            document.getElementById("confirmacion").value = "";
            document.getElementById("tracking").value = "";

            $('#texto_popup_error').html("No. de alerta generada: " + data.no_prealerta);
            $('#errorIngreso').modal('show')

          }
        }

      }
    });
  },
  invalidHandler: function(form) {}
});

So, the question is how to upload file and send the data from .ajax at the same time when press submit button.

Answer 1

Dropzone has different events and one of them is "sending"

You can do something like this:

$(document).ready(function(){
    Dropzone.autoDiscover = false;
    $("#dropzone").dropzone({
        url: "uploads.php",
        autoProcessQueue: false,
        previewsContainer: ".dropzone-previews",
        uploadMultiple: false,
        addRemoveLinks: false,
        //addRemoveLinks: true,
        maxFiles: 1,
        maxFileSize: 1000,
        dictResponseError: "Ha ocurrido un error en el server",
        acceptedFiles: 'application/pdf',
        init: function () {
            //append the data in the formData object.
            this.on("sending", function (file, xhr, formData, e) {
                formData.append("carrier", $('#carrier').val());
                formData.append("store", $('#tienda').val());
                formData.append("valor", $('#valor').val());
                formData.append("descripcion_envio", $('#confirmacion').val());
                formData.append("tracking_number", $('#tracking').val()); 
            }
        }                                        
    });
 });  

Answer 2

Instead of invoking an entirely new ajax request, you can just capture the sending event of the dropzone function and append your form values directly to it:

$("#dropzone").dropzone({
    url: "uploads.php",
    //....etc
    sending: function(file, xhr, formData) {
       formData.append("carrier", $('#carrier').val());
       formData.append("store", $('#tienda').val());
       formData.append("valor", $('#valor').val());
       formData.append("descripcion_envio", $('#confirmacion').val());
       formData.append("tracking_number", $('#tracking').val()); 
    }
    //...etc
});