DropZone.js - com varias arrays no form e com multiplos uploads - with Form Arrays and Multiple Uploads

<script src="js/dropzone.js"></script>
<link rel="stylesheet" href="css/dropzone.css">

<script>
Dropzone.options.myDropzone=
{
    url: "SUAPAGINA",
    paramName: "arquivo",
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 3,
    acceptedFiles: 'image/*,application/pdf',
    dictDefaultMessage: 'Arraste os arquivos para cá ou clique aqui',
    dictFileTooBig: 'A imagem não pode ser maior que 3 MBs',
    dictInvalidFileType: 'Apenas arquivos com terminação pdf, png, jpg e gif são aceitos',
    dictCancelUpload: 'Cancelar o UPLOAD',
    dictRemoveFile: '&#10006; Remover',
    dictCancelUploadConfirmation: 'Tem certeza que quer cancelaro UPLOAD?',
    dictMaxFilesExceeded: 'Você pode subir apenas 5 arquivos por vez',
    addRemoveLinks: true,
    init: function()
    {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
        // for Dropzone to process the queue (instead of default form behavior):
       
  // Necessaria função abaixo pois o Dropzone não esta parando em Erros como MaxFileSize e Accepeted File...
   this.on("error", function(file, message, xhr) {
        if (xhr == null) this.removeFile(file); // could choose to not remove file(s) on xhr error
        //alert(message);
        document.getElementById('erro').innerHTML="<p id='cpoErro'>"+message+"</p>";
        exit();
   });   
       
        document.getElementById("submit-all").addEventListener("click", function(e)
        {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            if (document.getElementById("obra").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Obra é Obrigatório</p>";
            else if (document.getElementById("inputString").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Fornecedores é Obrigatório</p>";
            else if (document.getElementById("inputString_Desc").value=='') document.getElementById('erro').innerHTML="<p id='cpoErro'>Descrição é Obrigatório</p>";
            else {
    if (dzClosure.files.length) dzClosure.processQueue();
    else $('#FormEnvia').submit();
   }
        });
        //send all the form data along with the files:
        this.on("sending", function(file, xhr, formData)
        {
   $('.pagamento').each(function(){
                formData.append("pagamento[]", $(this).val());
            });
            $('.valor').each(function(){
                formData.append("valor[]", $(this).val());
            });
            $('.status').each(function(){
                formData.append("status[]", $(this).val());
            });
            formData.append("total_pagtos", $("#total_pagtos").val());
   formData.append("id_obra", $("#obra").val());
            formData.append("descricao", $("#inputString_Desc").val());
            formData.append("fornecedores", $("#inputString").val());
            formData.append("obs", $("#obs").val());
        });
       
        this.on('success', function( file, resp ){
   document.getElementById('form-sucesso').innerHTML=resp;
  });
 
  this.on("error", function (file, message) {
          document.getElementById('form-sucesso').innerHTML=$(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.Message);
      });
         }
}
</script>
 <!--========================================================
                            CONTENT
  =========================================================-->
<form method='POST' action='SUAPAGINA' id='FormEnvia' enctype='multipart/form-data'>
 <p id='chamada'>PAGAMENTO</p>
 <div style='text-align:left;padding:12px 0 0 5%;'>
  <table>
   <tr>
    <td>Vencimento</td><td>Valor</td><td>Pago?</td>
   </tr>
   <tr>
    <td><input type='text' name='pagamento[]' placeholder='dd/mm/aaaa' required onkeyup='formataData(this)' maxlength='10' class='pagamento'>
    <td><input type='text' name='valor[]' placeholder='0.00' required class='valor'></td>
    <td><select name='status[]' class='status'><option value='A'>NÃO</option><option value='P'>SIM</option></select></td>
   </tr>
  </table>
 </div>
 <p></p>
 <div id='newRow'></div>
        <button id='addRow' type='button' class='btn btn-info'  onclick="document.getElementById('total_pagtos').value= parseInt(document.getElementById('total_pagtos').value)+1"> [+] Pagamentos</button>
   
    <p></p>
   
    <p id='chamada'>NOTAS FISCAIS</p>
    <p></p>
    <div class='dropzone' id='myDropzone' style='border: 1px solid #808080;border-radius: 4px; box-sizing: border-box;margin-bottom:15px;'>
  <div class='fallback'>
   <input type='file' name='arquivo' multiple>
  </div>
 </div>
   
  <div  style='width:100%;text-align:center;'>
   <input type='hidden' name='foi' value='2' />
   <input type='hidden' name='total_pagtos' id='total_pagtos' value='1' />
   <button type='submit' class='btn2' id='submit-all'>REGISTRAR</button>
   </div>
   <p></p>
  <div id='erro'></div>
</form>
  <script>
 // add row
    $("#addRow").click(function () {
        var html = '';
        html += '<div id="inputFormRow" style="border: 1px solid #808080;border-radius: 4px; box-sizing: border-box;margin-bottom:15px">';
        html += '<div style="text-align:right;">';
        html += '<button id="removeRow" type="button" class="btn btn-danger" onclick="document.getElementById(\'total_pagtos\').value=parseInt(document.getElementById(\'total_pagtos\').value)-1">&#10006;</button>';
        html += '</div>';
        html += '<table><tr><td>Vencimento</td><td>Valor</td><td>Pago?</td></tr>';
        html += '<tr>';
        html += '<td><input type="text" name="pagamento[]" class="pagamento" placeholder="dd/mm/aaaa" autocomplete="off" onkeyup="formataData(this)"  maxlength="10"></td>';
        html += '<td><input type="text" name="valor[]" class="valor" placeholder="0.00" autocomplete="off"></td>';
        html += '<td><select name="status[]" class="status"><option value="A">NÃO</option><option value="P">SIM</option></select></td>';
        html += '</tr>';
        html += '</table><p></p>';
        html += '</div>';

        $('#newRow').append(html);
    });

    // remove row
    $(document).on('click', '#removeRow', function () {
        $(this).closest('#inputFormRow').remove();
    });
 </script>