2022-06-05 18:53:31 +02:00
|
|
|
{% 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>
|
2022-06-05 21:18:24 +02:00
|
|
|
<form id="form" method="post" enctype="multipart/form-data" action="/upload/uploader">
|
2022-06-05 18:53:31 +02:00
|
|
|
<div class="drop-zone">
|
2022-06-14 14:47:12 +02:00
|
|
|
<span id="zone-txt" class="drop-zone__prompt">Drop file here or click to upload</span>
|
2022-06-05 18:53:31 +02:00
|
|
|
<input type="file" name="file" class="drop-zone__input">
|
|
|
|
|
</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;
|
2022-06-05 21:18:24 +02:00
|
|
|
console.log("oddajam form", e);
|
2022-06-14 14:47:12 +02:00
|
|
|
document.getElementById('zone-txt').innerHTML = "Uploading file...";
|
2022-06-05 21:18:24 +02:00
|
|
|
document.getElementById("form").submit();
|
2022-06-05 18:53:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
dropZoneElement.classList.remove("drop-zone--over");
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<body>
|
2022-06-14 14:47:12 +02:00
|
|
|
{% endblock %}
|
