JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
<form action="/file-upload">
<input type="text" name="text" />
<input type="file" name="file1" class="dropzone" />
<input type="file" name="file2" class="dropzone" />
<button type="submit">
submit
</button>
</form>

JavaScript

Dropzone.autoDiscover = false;

$(document).ready(()=>{
  const dropzones = []
  $('.dropzone').each(function(i, el){
    //const name = 'g_' + $(el).data('field')
    const name = $(el).attr('name');
    console.log(el);
    var myDropzone = new Dropzone(el, {
      url: "/file-upload",
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 100,
      maxFiles: 100,
      paramName: name,
      addRemoveLinks: true,
    })
    dropzones.push(myDropzone)
  })


  document.querySelector("button[type=submit]").addEventListener("click", function(e) {
    // Make sure that the form isn't actually being sent.
    e.preventDefault();
    e.stopPropagation();
    let form = new FormData($('form')[0])

    dropzones.forEach(dropzone => {
      let  { paramName }  = dropzone.options
      dropzone.files.forEach((file, i) => {
      console.log(paramName + '[' + i + ']', file);
        form.append(paramName + '[' + i + ']', file);
      })
    })
    
    console.warn(form);
    /*$.ajax({
        method: 'POST',
        data: form,
        processData: false,
        contentType: false,
        success: function(response) {
            window.location.replace(response)
        }
    });*/
  });
})