nicer upload UI

caricari/static/form.js

@@ -0,0 +1,29 @@
+const dropZone = document.getElementById('dropZone')
+const formFile = document.getElementById('formFile')
+
+dropZone.addEventListener('click', () => formFile.click())
+
+dropZone.addEventListener('dragover', (e) => {
+  e.preventDefault()
+  dropZone.classList.add('bg-light')
+})
+
+dropZone.addEventListener('dragleave', () => {
+  dropZone.classList.remove('bg-light')
+})
+
+dropZone.addEventListener('drop', (e) => {
+  e.preventDefault()
+  dropZone.classList.remove('bg-light')
+  formFile.files = e.dataTransfer.files
+  updateDropZoneText()
+})
+
+formFile.addEventListener('change', updateDropZoneText)
+
+function updateDropZoneText() {
+  dropZone.textContent =
+    formFile.files.length > 0
+      ? formFile.files[0].name
+      : 'Drag and drop a file here or click to select'
+}

caricari/templates/form.html

@@ -7,8 +7,11 @@
 		<form method="POST" enctype="multipart/form-data">
 <div class="mb-3">
 <label for="formFile" class="form-label">Seleziona file da caricare</label>
-<input id="formFile" class="form-control form-control-lg" type="file" name="file" />
+<div id="dropZone" class="border border-primary rounded p-5 text-center">
+Drag and drop a file here or click to select</div>
+<input id="formFile" class="d-none" type="file" name="file" />
 </div>
 			<button type=submit class="btn btn-primary">Invia</button>
 		</form>
+<script src="/static/form.js"></script>
 {%endblock %}