feat(tpl): use whole document as drag drop area

Author: marjune163

src/tpl/frontend/index.css

@@ -98,6 +98,25 @@ em {
 }
 
 
+html::before {
+	display: none;
+	content: '';
+	position: absolute;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	opacity: 0.7;
+	background: #c9c;
+}
+
+html.dragging::before {
+	display: block;
+}
+
+
 .path-list {
 	font-size: 1.5em;
 	overflow: hidden;
@@ -182,27 +201,6 @@ em {
 	position: relative;
 }
 
-.upload::before {
-	display: none;
-	content: '';
-	position: absolute;
-	z-index: 1;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	opacity: 0.7;
-	background: #c9c;
-}
-
-.upload.dragging::before {
-	display: block;
-}
-
-.upload.uploading.dragging::before {
-	background: transparent;
-}
-
 .upload input,
 .upload button {
 	display: block;

src/tpl/frontend/index.js

@@ -881,10 +881,11 @@
 				}
 			}
 
-			upload.addEventListener('dragenter', onDragEnterOver);
-			upload.addEventListener('dragover', onDragEnterOver);
-			upload.addEventListener('dragleave', onDragLeave);
-			upload.addEventListener('drop', onDrop);
+			var dragDropEl = document.documentElement;
+			dragDropEl.addEventListener('dragenter', onDragEnterOver);
+			dragDropEl.addEventListener('dragover', onDragEnterOver);
+			dragDropEl.addEventListener('dragleave', onDragLeave);
+			dragDropEl.addEventListener('drop', onDrop);
 		}
 
 		function enableAddPaste(uploadProgressively) {