{% extends 'base.html' %}

{% block header %}
  <head>
    <title>Drag and Drop File Upload</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
  </head>
{% endblock %}

{% block content %}
</body>
  <form id="form" method="post" enctype="multipart/form-data" action="/upload/uploader">
    <div class="drop-zone">
      <span class="drop-zone__prompt">Drop file here or click to upload</span>
      <input type="file" name="file" class="drop-zone__input">
      <input type="submit">
    </div>
  </form>
  
  
<script type="text/javascript">
  document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
    const dropZoneElement = inputElement.closest(".drop-zone");
      dropZoneElement.addEventListener("click", (e) => {
      inputElement.click();
    });

    dropZoneElement.addEventListener("dragover", (e) => {
      e.preventDefault();
      dropZoneElement.classList.add("drop-zone--over");
    });
 
    ["dragleave", "dragend"].forEach((type) => {
      dropZoneElement.addEventListener(type, (e) => {
        dropZoneElement.classList.remove("drop-zone--over");
      });
    });
    
    dropZoneElement.addEventListener("drop", (e) => {
      e.preventDefault();

      if (e.dataTransfer.files.length) {
        inputElement.files = e.dataTransfer.files;
        console.log("oddajam form", e);
        document.getElementById("form").submit();
      }

    dropZoneElement.classList.remove("drop-zone--over");
    });
  });
  
  </script>
<body>
{% endblock %}