67 lines
2.0 KiB
HTML
67 lines
2.0 KiB
HTML
{% 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 id="zone-txt" class="drop-zone__prompt">Drop file here or click to upload</span>
|
|
<input type="file" name="file" class="drop-zone__input" runat="server" accept=".pdf" multiple >
|
|
</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();
|
|
});
|
|
|
|
inputElement.addEventListener("change", (e) => {
|
|
e.preventDefault();
|
|
console.log(inputElement.files);
|
|
if (inputElement.files.length) {
|
|
console.log(inputElement)
|
|
console.log("oddajam form", e);
|
|
document.getElementById('zone-txt').innerHTML = "Uploading file...";
|
|
document.getElementById("form").submit();
|
|
}
|
|
});
|
|
|
|
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('zone-txt').innerHTML = "Uploading file...";
|
|
document.getElementById("form").submit();
|
|
}
|
|
|
|
dropZoneElement.classList.remove("drop-zone--over");
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<body>
|
|
{% endblock %}
|