const dropArea = document.querySelector("main");
const form = document.querySelector("form.invoices");

dropArea.addEventListener("dragover", (event) => {
  event.preventDefault();
  dropArea.classList.add("highlight");
});

dropArea.addEventListener("dragleave", () => {
  dropArea.classList.remove("highlight");
});

dropArea.addEventListener("drop", (event) => {
  console.log(event);
  event.preventDefault();
  dropArea.classList.remove("highlight");
  const files = event.dataTransfer.files;
  console.log(files);
  const input = form.querySelector("input[type=file]");
  input.files = files;
  form.submit();
});
