feat(tpl): add upload failed hint

When upload failed, show failed hint, and stop processing rest of the
batch queue. User must reload page manually.

Author: marjune163

src/i18n/translation.go

@@ -11,6 +11,8 @@ type Translation struct {
 	UploadDirContentsHint  string
 	UploadLabel            string
 	UploadingLabel         string
+	UploadSuccessLabel     string
+	UploadFailLabel        string
 
 	ListDirLabel  string
 	ListNameLabel string
@@ -45,6 +47,8 @@ var translationEnUs = Translation{
 	UploadDirContentsHint:  "Upload contents of directory",
 	UploadLabel:            "Upload",
 	UploadingLabel:         "Uploading...",
+	UploadSuccessLabel:     "Upload success",
+	UploadFailLabel:        "Upload failed",
 
 	ListDirLabel:  "Dir",
 	ListNameLabel: "Name",
@@ -79,6 +83,8 @@ var translationZhSimp = Translation{
 	UploadDirContentsHint:  "上传目录下的内容",
 	UploadLabel:            "上传",
 	UploadingLabel:         "上传中……",
+	UploadSuccessLabel:     "上传成功",
+	UploadFailLabel:        "上传失败",
 
 	ListDirLabel:  "目录",
 	ListNameLabel: "名称",
@@ -113,6 +119,8 @@ var translationZhTrad = Translation{
 	UploadDirContentsHint:  "上傳目錄下的內容",
 	UploadLabel:            "上傳",
 	UploadingLabel:         "上傳中……",
+	UploadSuccessLabel:     "上傳成功",
+	UploadFailLabel:        "上傳失敗",
 
 	ListDirLabel:  "目錄",
 	ListNameLabel: "名稱",

src/tpl/frontend/index.css

@@ -210,7 +210,8 @@ html.dragging::before {
 	pointer-events: none;
 }
 
-.upload-status.uploading {
+.upload-status.uploading,
+.upload-status.failed {
 	visibility: visible;
 }
 
@@ -223,12 +224,21 @@ html.dragging::before {
 	transition: transform .2s, opacity .2s;
 	padding: 0.5em 1em;
 	color: #fff;
+	white-space: nowrap;
+}
+
+.upload-status .label.tips {
 	background: #c9c;
 	background-color: rgba(204, 153, 204, 0.8);
-	white-space: nowrap;
 }
 
-.upload-status.uploading .label {
+.upload-status .label.failed {
+	background: #800000;
+	background-color: rgba(128, 0, 0, 0.8);
+}
+
+.upload-status.uploading .label.tips,
+.upload-status.failed .label.failed {
 	opacity: 1;
 	transform: translate(-50%, 10%);
 }

src/tpl/frontend/index.html

@@ -23,7 +23,8 @@
 
 {{if .CanUpload}}
 <div class="upload-status">
-	<span class="label">{{.Trans.UploadingLabel}}</span>
+	<span class="label tips">{{.Trans.UploadingLabel}}</span>
+	<span class="label failed">{{.Trans.UploadFailLabel}}<span class="message"></span></span>
 	<span class="progress"></span>
 </div>
 {{end}}

src/tpl/frontend/index.js

@@ -792,20 +792,31 @@
 			var uploading = false;
 			var batches = [];
 			var classUploading = 'uploading';
+			var classFailed = 'failed';
 			var elUploadStatus = document.body.querySelector('.upload-status');
 			var elProgress = elUploadStatus && elUploadStatus.querySelector('.progress');
+			var elFailedMessage = elUploadStatus && elUploadStatus.querySelector('.failed .message');
 
 			function onComplete() {
 				if (elProgress) {
 					elProgress.style.width = '';
 				}
+			}
+
+			function onSuccess() {
 				if (batches.length) {
-					uploadBatch(batches.shift());
+					return uploadBatch(batches.shift());	// use "return" for tail call optimize
 				} else {
 					uploading = false;
-					if (elUploadStatus) {
-						removeClass(elUploadStatus, classUploading);
-					}
+					removeClass(elUploadStatus, classUploading);
+				}
+			}
+
+			function onFail(e) {
+				removeClass(elUploadStatus, classUploading);
+				addClass(elUploadStatus, classFailed);
+				if (elFailedMessage) {
+					elFailedMessage.textContent = " - " + e.type;
 				}
 			}
 
@@ -829,9 +840,7 @@
 					batches.push(files);
 				} else {
 					uploading = true;
-					if (elUploadStatus) {
-						addClass(elUploadStatus, classUploading);
-					}
+					addClass(elUploadStatus, classUploading);
 					uploadBatch(files);
 				}
 			}
@@ -857,8 +866,11 @@
 
 				var xhr = new XMLHttpRequest();
 				xhr.upload.addEventListener('error', onComplete);
+				xhr.upload.addEventListener('error', onFail);
 				xhr.upload.addEventListener('abort', onComplete);
+				xhr.upload.addEventListener('abort', onFail);
 				xhr.upload.addEventListener('load', onComplete);
+				xhr.upload.addEventListener('load', onSuccess);
 				xhr.upload.addEventListener('load', onLoad);
 				if (elProgress) {
 					xhr.upload.addEventListener('progress', onProgress);