How to upload multiple files with drag and drop

Conditional Fields PRO supports the [multifile] tag, which allows users to upload multiple files to a single file input field. By default this field looks plain and simple, but by popular demand this page demonstrates how you can turn it into a full-blown drag-and-drop interface which plays nicely with Contact Form 7 and Conditional Fields.

The code is an adaption of the PHP drag and drop upload files article on bdwm.be. Check it out if you want to understand more about what’s going on in the code.

Form

Form Code

<style>
  .upload-box {
      background-color: white;
      outline: 2px dashed black;
      height: 200px;
      margin: 10px 2px;
  }
  .upload-box.is-dragover {
      background-color: grey;
  }
  .upload-box {
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .upload-box label {
      width: auto !important;
  }
  .upload-box label strong {
      text-decoration: underline;
      color: blue;
      cursor: pointer;
  }
  .upload-box label strong:hover {
      color: blueviolet
  }
  .upload-box input {
      display: none !important;
  }
</style>
<label>What's your name?
[text* your-name]</label>
<div class="upload-box">
  <label><strong>Select files</strong><span> or drag them here...</span>[multifile* my-files]</label>
  <div class="file-list"></div>
</div>
[submit]
<script>
    const box = document.querySelector('.upload-box');
    const fileInput = document.querySelector('[name="my-files[]"');
    const selectButton = document.querySelector('label strong');
    const fileList = document.querySelector('.file-list');
    let droppedFiles = [];
    [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
        e.preventDefault();
        e.stopPropagation();
    }), false );
    [ 'dragover', 'dragenter' ].forEach( event => box.addEventListener(event, function(e) {
        box.classList.add('is-dragover');
    }), false );
    [ 'dragleave', 'dragend', 'drop' ].forEach( event => box.addEventListener(event, function(e) {
        box.classList.remove('is-dragover');
    }), false );
    box.addEventListener('drop', function(e) {
        droppedFiles = e.dataTransfer.files;
        fileInput.files = droppedFiles;
        updateFileList();
    }, false );
    fileInput.addEventListener( 'change', updateFileList );
    function updateFileList() {
        const filesArray = Array.from(fileInput.files);
        if (filesArray.length > 1) {
            fileList.innerHTML = filesArray.length + ' files selected';
        } else if (filesArray.length == 1) {
            fileList.innerHTML = '1 file selected';
        } else {
            fileList.innerHTML = '';
        }
    }
</script>

Email Body

Hi [your-name],<br><br>

Thanks for uploading these files: [my-files]<br>
(they have also been attached to this email message)<br><br>

Kind regards,<br>
The website

Attachments

[my-files]

Edit this form in the form tester