feat(tpl/upload): ignore dropped files if is uploading

Author: marjune163

src/tpl/asset/main.css

@@ -188,6 +188,10 @@ em {
 	display: block;
 }
 
+.upload.uploading.dragging::before {
+	background: transparent;
+}
+
 .upload input,
 .upload button {
 	display: block;

src/tpl/asset/main.css.go

@@ -157,6 +157,9 @@ background: #c9c;
 .upload.dragging::before {
 display: block;
 }
+.upload.uploading.dragging::before {
+background: transparent;
+}
 .upload input,
 .upload button {
 display: block;

src/tpl/asset/main.js

@@ -411,6 +411,8 @@
 			return;
 		}
 
+		var classUploading = 'uploading';
+
 		var file = 'file';
 		var dirFile = 'dirfile';
 		var innerDirFile = 'innerdirfile';
@@ -428,6 +430,10 @@
 			ele && ele.classList.remove(className);
 		}
 
+		function hasClass(ele, className) {
+			return ele && ele.classList.contains(className);
+		}
+
 		function enableAddDir() {
 			var classHidden = 'hidden';
 			var classActive = 'active';
@@ -557,6 +563,7 @@
 				}
 				fileInput.disabled = false;
 				btnSubmit.disabled = false;
+				removeClass(upload, classUploading);
 			}
 
 			function onLoad() {
@@ -601,6 +608,7 @@
 
 				xhr.open(form.method, form.action);
 				xhr.send(parts);
+				addClass(upload, classUploading);
 				fileInput.disabled = true;
 				btnSubmit.disabled = true;
 			}
@@ -621,15 +629,17 @@
 		}
 
 		function enableAddDragDrop(uploadProgressively) {
+			var classDragging = 'dragging';
+
 			function onDragEnterOver(e) {
 				e.stopPropagation();
 				e.preventDefault();
-				addClass(e.currentTarget, 'dragging');
+				addClass(e.currentTarget, classDragging);
 			}
 
 			function onDragLeave(e) {
 				if (e.target === e.currentTarget) {
-					removeClass(e.currentTarget, 'dragging');
+					removeClass(e.currentTarget, classDragging);
 				}
 			}
 
@@ -688,7 +698,10 @@
 			function onDrop(e) {
 				e.stopPropagation();
 				e.preventDefault();
-				removeClass(e.currentTarget, 'dragging');
+				removeClass(e.currentTarget, classDragging);
+				if (hasClass(e.currentTarget, classUploading)) {
+					return;
+				}
 				fileInput.value = '';
 
 				if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) {
@@ -746,10 +759,10 @@
 				}
 			}
 
-			upload.addEventListener('dragenter', onDragEnterOver, false);
-			upload.addEventListener('dragover', onDragEnterOver, false);
-			upload.addEventListener('dragleave', onDragLeave, false);
-			upload.addEventListener('drop', onDrop, false);
+			upload.addEventListener('dragenter', onDragEnterOver);
+			upload.addEventListener('dragover', onDragEnterOver);
+			upload.addEventListener('dragleave', onDragLeave);
+			upload.addEventListener('drop', onDrop);
 		}
 
 		enableAddDir();

src/tpl/asset/main.js.go

@@ -369,6 +369,7 @@ var uploadType = document.body.querySelector('.upload-type');
 if (!uploadType) {
 return;
 }
+var classUploading = 'uploading';
 var file = 'file';
 var dirFile = 'dirfile';
 var innerDirFile = 'innerdirfile';
@@ -382,6 +383,9 @@ ele && ele.classList.add(className);
 function removeClass(ele, className) {
 ele && ele.classList.remove(className);
 }
+function hasClass(ele, className) {
+return ele && ele.classList.contains(className);
+}
 function enableAddDir() {
 var classHidden = 'hidden';
 var classActive = 'active';
@@ -494,6 +498,7 @@ elProgress.style.width = '';
 }
 fileInput.disabled = false;
 btnSubmit.disabled = false;
+removeClass(upload, classUploading);
 }
 function onLoad() {
 location.reload();
@@ -531,6 +536,7 @@ xhr.upload.addEventListener('progress', onProgress);
 }
 xhr.open(form.method, form.action);
 xhr.send(parts);
+addClass(upload, classUploading);
 fileInput.disabled = true;
 btnSubmit.disabled = true;
 }
@@ -547,14 +553,15 @@ uploadProgressively(files);
 return uploadProgressively;
 }
 function enableAddDragDrop(uploadProgressively) {
+var classDragging = 'dragging';
 function onDragEnterOver(e) {
 e.stopPropagation();
 e.preventDefault();
-addClass(e.currentTarget, 'dragging');
+addClass(e.currentTarget, classDragging);
 }
 function onDragLeave(e) {
 if (e.target === e.currentTarget) {
-removeClass(e.currentTarget, 'dragging');
+removeClass(e.currentTarget, classDragging);
 }
 }
 function getFilesFromEntries(entries, onDone) {
@@ -607,7 +614,10 @@ getFilesFromEntries(entries, onDone);
 function onDrop(e) {
 e.stopPropagation();
 e.preventDefault();
-removeClass(e.currentTarget, 'dragging');
+removeClass(e.currentTarget, classDragging);
+if (hasClass(e.currentTarget, classUploading)) {
+return;
+}
 fileInput.value = '';
 if (!e.dataTransfer || !e.dataTransfer.files || !e.dataTransfer.files.length) {
 return;
@@ -660,10 +670,10 @@ form.submit();
 }
 }
 }
-upload.addEventListener('dragenter', onDragEnterOver, false);
-upload.addEventListener('dragover', onDragEnterOver, false);
-upload.addEventListener('dragleave', onDragLeave, false);
-upload.addEventListener('drop', onDrop, false);
+upload.addEventListener('dragenter', onDragEnterOver);
+upload.addEventListener('dragover', onDragEnterOver);
+upload.addEventListener('dragleave', onDragLeave);
+upload.addEventListener('drop', onDrop);
 }
 enableAddDir();
 var uploadProgressively = enableUploadProgress();