feat(tpl): show hint for upload dir failed if mkdir disabled

Author: marjune163

src/i18n/translation.go

@@ -13,6 +13,7 @@ type Translation struct {
 	UploadingLabel         string
 	UploadSuccessLabel     string
 	UploadFailLabel        string
+	UploadDirFailMessage   string
 
 	ListDirLabel  string
 	ListNameLabel string
@@ -49,6 +50,7 @@ var translationEnUs = Translation{
 	UploadingLabel:         "Uploading...",
 	UploadSuccessLabel:     "Upload success",
 	UploadFailLabel:        "Upload failed",
+	UploadDirFailMessage:   "Cannot upload directory. Make sure mkdir is enabled, and using a supported browser.",
 
 	ListDirLabel:  "Dir",
 	ListNameLabel: "Name",
@@ -85,6 +87,7 @@ var translationZhSimp = Translation{
 	UploadingLabel:         "上传中……",
 	UploadSuccessLabel:     "上传成功",
 	UploadFailLabel:        "上传失败",
+	UploadDirFailMessage:   "无法上传目录。 请确保mkdir已启用，并使用受支持的浏览器。",
 
 	ListDirLabel:  "目录",
 	ListNameLabel: "名称",
@@ -121,6 +124,7 @@ var translationZhTrad = Translation{
 	UploadingLabel:         "上傳中……",
 	UploadSuccessLabel:     "上傳成功",
 	UploadFailLabel:        "上傳失敗",
+	UploadDirFailMessage:   "無法上傳目錄。 請確保mkdir已啟用，並使用受支援的流覽器。",
 
 	ListDirLabel:  "目錄",
 	ListNameLabel: "名稱",

src/tpl/frontend/index.html

@@ -45,10 +45,15 @@
 {{end}}
 
 {{if .CanUpload}}
+<script type="text/javascript">
+	function showUploadDirFailMessage() {
+		alert('{{.Trans.UploadDirFailMessage}}');
+	}
+</script>
 <div class="tab upload-type">
 	<label class="file active" tabindex="0" role="button" title="{{.Trans.UploadFilesHint}}">{{.Trans.UploadFilesLabel}}</label>
-	{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirHint}}">{{.Trans.UploadDirLabel}}</label>{{end}}
-	<label class="innerdirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirContentsHint}}">{{.Trans.UploadDirContentsLabel}}</label>
+	{{if .CanMkdir}}<label class="dirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirHint}}">{{.Trans.UploadDirLabel}}</label>
+	<label class="innerdirfile hidden" tabindex="0" role="button" title="{{.Trans.UploadDirContentsHint}}">{{.Trans.UploadDirContentsLabel}}</label>{{end}}
 </div>
 <div class="panel upload">
 	<form method="POST" action="{{.SubItemPrefix}}?upload" enctype="multipart/form-data">

src/tpl/frontend/index.js

@@ -511,6 +511,7 @@
 		var optDirFile = uploadType.querySelector('.' + dirFile);
 		var optInnerDirFile = uploadType.querySelector('.' + innerDirFile);
 		var optActive = optFile;
+		var canMkdir = Boolean(optDirFile);
 
 		var padStart = String.prototype.padStart ? function (sourceString, targetLength, padTemplate) {
 			return sourceString.padStart(targetLength, padTemplate);
@@ -935,8 +936,9 @@
 
 				var items = e.dataTransfer.items;
 				if (itemsHasDir(items)) {
-					if (!uploadProgressively) {
-						// must use progressive upload by JS if has directory
+					// must use progressive upload by JS if has directory
+					if (!canMkdir || !uploadProgressively) {
+						typeof showUploadDirFailMessage !== strUndef && showUploadDirFailMessage();
 						return;
 					}
 					itemsToFiles(items, function (files) {
@@ -1065,6 +1067,10 @@
 					return;
 				}
 				var hasDir = itemsHasDir(items);
+				if (hasDir && !canMkdir) {
+					typeof showUploadDirFailMessage !== strUndef && showUploadDirFailMessage();
+					return;
+				}
 				itemsToFiles(items, function (files) {
 					if (!files.length) {
 						// for pasted text