#overlay Drop CSV file here
#form
  p Please drag'n'drop a CSV file on the this window

#overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 32;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  filter: opacity(0);
  visibility: hidden;
  color: #fff;
  font-size: 4.75rem;
  background-color: rgba(#000,.75);
  transition: .25s;
}
#form {
  #error {
    color: tomato;
  }
}

function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}

function enabled (e) {
  this.target.style.filter = 'opacity(1)';
  this.target.style.visibility = 'visible';
}

function disabled (e) {
  this.target.style.filter = 'opacity(0)';
  this.target.style.visibility = 'hidden';
}

function setErrorMessage (message) {
  let messages = document.createElement('p');
  messages.id = 'error';
  messages.textContent = message;

  const form = document.querySelector('#form');
  if (form.lastChild) {
    form.lastChild.remove();
  }
  form.appendChild(messages);
}

function getExtension(filename) {
  var parts = filename.split('.');
  return parts[parts.length - 1];
}

function handleDrop (e) {
  // If a file type is csv
  const ext = getExtension(e.dataTransfer.files[0].name);
  if (ext.toLowerCase() != 'csv') {
    e.preventDefault();
    e.stopPropagation();

    document.querySelector('#overlay').style.filter = 'opacity(0)';
    document.querySelector('#overlay').style.visibility = 'hidden';
    
    setErrorMessage('Invalid file type');
    return false;
  }

  overlay.textContent = 'Now uploading the file...';

  let formData = new FormData();
  formData.append('file', e.dataTransfer.files[0]);

  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4) {
      switch (xhr.status) {
        case 200:
          location.reload();
          break;
        case 500:
          document.querySelector('#overlay').style.filter = 'opacity(0)';
          document.querySelector('#overlay').style.visibility = 'hidden';
          const errorMessage = JSON.parse(xhr.responseText)['alert'];
          setErrorMessage(errorMessage);
          break;
        default:
          break;
      }
    }
  }
  xhr.open('POST', '/upload');
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  // Uncomment a bellow line when included this code to your app
  // xhr.send(formData);
  
  // Remove bellow 3 lines when included this code to your app
  alert('Complete uploading');
  document.querySelector('#overlay').style.filter = 'opacity(0)';
  document.querySelector('#overlay').style.visibility = 'hidden';
}

/**
 * @function acceptDragDrop
 * @description Accept a file to upload on window with drag'n'drop
 */
const acceptDragDrop = () => {
  const overlay = document.querySelector('#overlay');

  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    overlay.addEventListener(eventName, preventDefaults, false);
  });  

  window.addEventListener('dragenter', { handleEvent: enabled, target: overlay });
  overlay.addEventListener('dragleave', { handleEvent: disabled, target: overlay });
  overlay.addEventListener('drop', { handleEvent: handleDrop, target: overlay });
}

document.addEventListener('DOMContentLoaded', e => {
  acceptDragDrop();
});