allow to drop anywhere

2 files changed, 3 insertions, 16 deletions

diff --git a/index.html b/index.html
index a7c3de1..170f9ec 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 <form action="upload.php" method="POST" enctype="multipart/form-data">
 
 <label id="drop-zone">
-	Drop images here, or click to upload.
+	Drop files on the page, or paste them, or click here to upload.
 	<input type="file" id="file-input" multiple accept="*/*" name="file[]" />
 </label>
 <ul id="preview"></ul>
diff --git a/static/script.js b/static/script.js
index 5d48603..4be36b8 100644
--- a/static/script.js
+++ b/static/script.js
@@ -28,7 +28,6 @@ addEventListener("DOMContentLoaded", function () {
 	}
 
 	/* DRAG-N-DROP */
-	const dropZone = document.getElementById("drop-zone");
 	const preview = document.getElementById("preview");
 
 	function dropHandler(ev) {
@@ -39,9 +38,9 @@ addEventListener("DOMContentLoaded", function () {
 		uploadFiles(files);
 	}
 
-	dropZone.addEventListener("drop", dropHandler);
+	window.addEventListener("drop", dropHandler);
 
-	dropZone.addEventListener("dragover", (e) => {
+	window.addEventListener("dragover", (e) => {
 		const fileItems = [...e.dataTransfer.items].filter(
 			(item) => item.kind === "file",
 		);
@@ -55,18 +54,6 @@ addEventListener("DOMContentLoaded", function () {
 		}
 	});
 
-	window.addEventListener("dragover", (e) => {
-		const fileItems = [...e.dataTransfer.items].filter(
-			(item) => item.kind === "file",
-		);
-		if (fileItems.length > 0) {
-			e.preventDefault();
-			if (!dropZone.contains(e.target)) {
-				e.dataTransfer.dropEffect = "none";
-			}
-		}
-	});
-
 	const fileInput = document.getElementById("file-input");
 	fileInput.addEventListener("change", (e) => {
 		uploadFiles(e.target.files);