contentmatcher/templates/menu/upload.html

56 lines
1.6 KiB
HTML
Raw Normal View History

{% 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">
2022-06-14 14:47:12 +02:00
<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">
</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);
2022-06-14 14:47:12 +02:00
document.getElementById('zone-txt').innerHTML = "Uploading file...";
document.getElementById("form").submit();
}
dropZoneElement.classList.remove("drop-zone--over");
});
});
</script>
<body>
2022-06-14 14:47:12 +02:00
{% endblock %}