53 lines
1.4 KiB
HTML
53 lines
1.4 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 method="post" enctype="multipart/form-data" action="localhost:5000/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;
|
|
}
|
|
|
|
dropZoneElement.classList.remove("drop-zone--over");
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<body>
|
|
{% endblock %} |