fix(tpl/upload): apply workaround for mobile devices that cannot select directory

Most mobile browsers can pass the test for `webkitdirectory` on HTML
file input. However they actually has no ability to select directory
based on OS file selector UI.

If all files has no path information, fallback to file upload mode.

Author: marjune163

src/tpl/asset/main.js

@@ -412,8 +412,7 @@
 			var classHidden = 'hidden';
 			var classActive = 'active';
 
-			function onClickOpt(e) {
-				var optTarget = e.target;
+			function onClickOpt(optTarget, clearInput) {
 				if (optTarget === optActive) {
 					return;
 				}
@@ -422,7 +421,31 @@
 				optActive = optTarget;
 				addClass(optActive, classActive);
 
-				fileInput.value = '';
+				if (clearInput) {
+					fileInput.value = '';
+				}
+				return true;
+			}
+
+			function onClickOptFile(e) {
+				if (onClickOpt(optFile, Boolean(e))) {
+					fileInput.name = file;
+					fileInput.webkitdirectory = false;
+				}
+			}
+
+			function onClickOptDirFile(e) {
+				if (onClickOpt(optDirFile, Boolean(e))) {
+					fileInput.name = dirFile;
+					fileInput.webkitdirectory = true;
+				}
+			}
+
+			function onClickOptInnerDirFile(e) {
+				if (onClickOpt(optInnerDirFile, Boolean(e))) {
+					fileInput.name = innerDirFile;
+					fileInput.webkitdirectory = true;
+				}
 			}
 
 			if (typeof fileInput.webkitdirectory === 'undefined') {
@@ -433,25 +456,13 @@
 			optInnerDirFile && removeClass(optInnerDirFile, classHidden);
 
 			if (optFile) {
-				optFile.addEventListener('click', onClickOpt);
-				optFile.addEventListener('click', function () {
-					fileInput.name = file;
-					fileInput.webkitdirectory = false;
-				});
+				optFile.addEventListener('click', onClickOptFile);
 			}
 			if (optDirFile) {
-				optDirFile.addEventListener('click', onClickOpt);
-				optDirFile.addEventListener('click', function () {
-					fileInput.name = dirFile;
-					fileInput.webkitdirectory = true
-				});
+				optDirFile.addEventListener('click', onClickOptDirFile);
 			}
 			if (optInnerDirFile) {
-				optInnerDirFile.addEventListener('click', onClickOpt);
-				optInnerDirFile.addEventListener('click', function () {
-					fileInput.name = innerDirFile;
-					fileInput.webkitdirectory = true
-				});
+				optInnerDirFile.addEventListener('click', onClickOptInnerDirFile);
 			}
 
 			if (sessionStorage) {
@@ -472,6 +483,25 @@
 					optInnerDirFile && optInnerDirFile.click();
 				}
 			}
+
+			optFile && fileInput.addEventListener('change', function (e) {
+				// workaround fix for mobile device, select dir not work but still act like select files
+				// switch back to file
+				if (optActive === optFile) {
+					return;
+				}
+				var files = e.target.files;
+				if (!files || !files.length) {
+					return;
+				}
+
+				var nodir = Array.prototype.slice.call(files).every(function (file) {
+					return !file.webkitRelativePath;
+				});
+				if (nodir) {
+					onClickOptFile();	// prevent clear input files
+				}
+			});
 		}
 
 		function enableAddDragDrop() {

src/tpl/asset/main.js.go

@@ -370,42 +370,50 @@ ele && ele.classList.remove(className);
 function enableAddDir() {
 var classHidden = 'hidden';
 var classActive = 'active';
-function onClickOpt(e) {
-var optTarget = e.target;
+function onClickOpt(optTarget, clearInput) {
 if (optTarget === optActive) {
 return;
 }
 removeClass(optActive, classActive);
 optActive = optTarget;
 addClass(optActive, classActive);
+if (clearInput) {
 fileInput.value = '';
 }
+return true;
+}
+function onClickOptFile(e) {
+if (onClickOpt(optFile, Boolean(e))) {
+fileInput.name = file;
+fileInput.webkitdirectory = false;
+}
+}
+function onClickOptDirFile(e) {
+if (onClickOpt(optDirFile, Boolean(e))) {
+fileInput.name = dirFile;
+fileInput.webkitdirectory = true;
+}
+}
+function onClickOptInnerDirFile(e) {
+if (onClickOpt(optInnerDirFile, Boolean(e))) {
+fileInput.name = innerDirFile;
+fileInput.webkitdirectory = true;
+}
+}
 if (typeof fileInput.webkitdirectory === 'undefined') {
 addClass(uploadType, classNone);
 return;
 }
 optDirFile && removeClass(optDirFile, classHidden);
 optInnerDirFile && removeClass(optInnerDirFile, classHidden);
 if (optFile) {
-optFile.addEventListener('click', onClickOpt);
-optFile.addEventListener('click', function () {
-fileInput.name = file;
-fileInput.webkitdirectory = false;
-});
+optFile.addEventListener('click', onClickOptFile);
 }
 if (optDirFile) {
-optDirFile.addEventListener('click', onClickOpt);
-optDirFile.addEventListener('click', function () {
-fileInput.name = dirFile;
-fileInput.webkitdirectory = true
-});
+optDirFile.addEventListener('click', onClickOptDirFile);
 }
 if (optInnerDirFile) {
-optInnerDirFile.addEventListener('click', onClickOpt);
-optInnerDirFile.addEventListener('click', function () {
-fileInput.name = innerDirFile;
-fileInput.webkitdirectory = true
-});
+optInnerDirFile.addEventListener('click', onClickOptInnerDirFile);
 }
 if (sessionStorage) {
 var uploadTypeField = 'upload-type';
@@ -423,6 +431,23 @@ optDirFile && optDirFile.click();
 optInnerDirFile && optInnerDirFile.click();
 }
 }
+optFile && fileInput.addEventListener('change', function (e) {
+// workaround fix for mobile device, select dir not work but still act like select files
+// switch back to file
+if (optActive === optFile) {
+return;
+}
+var files = e.target.files;
+if (!files || !files.length) {
+return;
+}
+var nodir = Array.prototype.slice.call(files).every(function (file) {
+return !file.webkitRelativePath;
+});
+if (nodir) {
+onClickOptFile();	// prevent clear input files
+}
+});
 }
 function enableAddDragDrop() {
 function onDragEnterOver(e) {