feat(tpl): use JavaScript code to perform upload if possible

- Disable upload button when uploading
- Show upload progress if possible
- Fix Safari browser that file input with `webkitdirectory` uploading will not carry file path

Author: marjune163

src/tpl/asset/main.css

@@ -74,6 +74,19 @@ em {
 	visibility: hidden;
 }
 
+.if-disabled {
+	display: none;
+}
+
+:disabled .if-disabled {
+	display: inherit;
+}
+
+:disabled .if-enabled {
+	display: none;
+}
+
+
 .path-list {
 	font-size: 1.5em;
 	overflow: hidden;
@@ -174,13 +187,14 @@ em {
 	display: block;
 }
 
-.upload input {
+.upload input,
+.upload button {
 	display: block;
 	width: 100%;
 	box-sizing: border-box;
 }
 
-.upload input + input {
+.upload button {
 	margin-top: 0.5em;
 }
 

src/tpl/asset/main.css.go

@@ -63,6 +63,15 @@ display: none;
 .hidden {
 visibility: hidden;
 }
+.if-disabled {
+display: none;
+}
+:disabled .if-disabled {
+display: inherit;
+}
+:disabled .if-enabled {
+display: none;
+}
 .path-list {
 font-size: 1.5em;
 overflow: hidden;
@@ -147,12 +156,13 @@ background: #c9c;
 .upload.dragging::before {
 display: block;
 }
-.upload input {
+.upload input,
+.upload button {
 display: block;
 width: 100%;
 box-sizing: border-box;
 }
-.upload input + input {
+.upload button {
 margin-top: 0.5em;
 }
 .archive {

src/tpl/asset/main.js

@@ -377,7 +377,11 @@
 		if (!upload) {
 			return;
 		}
-		var fileInput = upload.querySelector('.file');
+		var form = upload.querySelector('form');
+		if (!form) {
+			return;
+		}
+		var fileInput = form.querySelector('.file');
 		if (!fileInput) {
 			return;
 		}
@@ -516,8 +520,57 @@
 			upload.addEventListener('drop', onDrop, false);
 		}
 
+		function enableUploadProgress() {	// also fix Safari upload filename has no path info
+			if (!FormData) {
+				return;
+			}
+
+			var btnSubmit = form.querySelector('.submit');
+			if (!btnSubmit) {
+				return;
+			}
+
+			function onComplete() {
+				btnSubmit.disabled = false;
+			}
+
+			function onLoad() {
+				location.reload();
+			}
+
+			form.addEventListener('submit', function (e) {
+				e.stopPropagation();
+				e.preventDefault();
+
+				var files = Array.prototype.slice.call(fileInput.files);
+				if (!files.length) {
+					return;
+				}
+
+				var formName = fileInput.name;
+				var parts = new FormData();
+				files.forEach(function (file) {
+					if (file.webkitRelativePath) {
+						parts.append(formName, file, file.webkitRelativePath);
+					} else {
+						parts.append(formName, file);
+					}
+				});
+
+				var xhr = new XMLHttpRequest();
+				xhr.addEventListener('error', onComplete);
+				xhr.addEventListener('load', onComplete);
+				xhr.addEventListener('load', onLoad);
+
+				xhr.open(form.method, form.action);
+				xhr.send(parts);
+				btnSubmit.disabled = true;
+			});
+		}
+
 		enableAddDir();
 		enableAddDragDrop();
+		enableUploadProgress();
 	}
 
 	function enableNonRefreshDelete() {

src/tpl/asset/main.js.go

@@ -342,7 +342,11 @@ var upload = document.body.querySelector('.upload');
 if (!upload) {
 return;
 }
-var fileInput = upload.querySelector('.file');
+var form = upload.querySelector('form');
+if (!form) {
+return;
+}
+var fileInput = form.querySelector('.file');
 if (!fileInput) {
 return;
 }
@@ -458,8 +462,48 @@ upload.addEventListener('dragover', onDragEnterOver, false);
 upload.addEventListener('dragleave', onDragLeave, false);
 upload.addEventListener('drop', onDrop, false);
 }
+function enableUploadProgress() {	// also fix Safari upload filename has no path info
+if (!FormData) {
+return;
+}
+var btnSubmit = form.querySelector('.submit');
+if (!btnSubmit) {
+return;
+}
+function onComplete() {
+btnSubmit.disabled = false;
+}
+function onLoad() {
+location.reload();
+}
+form.addEventListener('submit', function (e) {
+e.stopPropagation();
+e.preventDefault();
+var files = Array.prototype.slice.call(fileInput.files);
+if (!files.length) {
+return;
+}
+var formName = fileInput.name;
+var parts = new FormData();
+files.forEach(function (file) {
+if (file.webkitRelativePath) {
+parts.append(formName, file, file.webkitRelativePath);
+} else {
+parts.append(formName, file);
+}
+});
+var xhr = new XMLHttpRequest();
+xhr.addEventListener('error', onComplete);
+xhr.addEventListener('load', onComplete);
+xhr.addEventListener('load', onLoad);
+xhr.open(form.method, form.action);
+xhr.send(parts);
+btnSubmit.disabled = true;
+});
+}
 enableAddDir();
 enableAddDragDrop();
+enableUploadProgress();
 }
 function enableNonRefreshDelete() {
 if (!document.querySelector) {

src/tpl/page.html

@@ -36,7 +36,9 @@
 	<div class="panel upload">
 		<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">
 			<input type="file" name="file" multiple="multiple" class="file"/>
-			<input type="submit" value="Upload" class="submit"/>
+			<button type="submit" class="submit">
+				<span class="if-enabled">Upload</span><span class="if-disabled">Uploading ...</span>
+			</button>
 		</form>
 	</div>
 {{end}}

src/tpl/page.html.go

@@ -44,7 +44,9 @@ const pageTplStr = `
 <div class="panel upload">
 <form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">
 <input type="file" name="file" multiple="multiple" class="file"/>
-<input type="submit" value="Upload" class="submit"/>
+<button type="submit" class="submit">
+<span class="if-enabled">Upload</span><span class="if-disabled">Uploading ...</span>
+</button>
 </form>
 </div>
 {{end}}