WebClient: improve readability of upload progress

Fixes #1773

Signed-off-by: Nicola Murino <[email protected]>

static/locales/en/translation.json

@@ -291,10 +291,10 @@
         "no_files_folders": "No files or folders",
         "invalid_name": "File or folder names cannot contain \"/\"",
         "folder_name_required": "Folder name is required",
-        "deleting": "Delete {{idx}}/{{total}}: {{- name}}",
-        "copying": "Copy {{idx}}/{{total}}: {{- name}}",
-        "moving": "Move {{idx}}/{{total}}: {{- name}}",
-        "uploading": "Upload {{idx}}/{{total}}: {{- name}}",
+        "deleting": "Delete {{idx}}/{{total}}",
+        "copying": "Copy {{idx}}/{{total}}",
+        "moving": "Move {{idx}}/{{total}}",
+        "uploading": "Upload {{idx}}/{{total}}",
         "err_403": "Permission denied",
         "err_429": "Too many concurrent requests",
         "err_generic": "Unable to access the requested resource",

static/locales/it/translation.json

@@ -291,10 +291,10 @@
         "no_files_folders": "Nessun file o cartella",
         "invalid_name": "I nomi di file o cartelle non possono contenere \"/\"",
         "folder_name_required": "Il nome della cartella è obbligatorio",
-        "deleting": "Eliminazione {{idx}}/{{total}}: {{- name}}",
-        "copying": "Copia {{idx}}/{{total}}: {{- name}}",
-        "moving": "Spostamento {{idx}}/{{total}}: {{- name}}",
-        "uploading": "Caricamento {{idx}}/{{total}}: {{- name}}",
+        "deleting": "Eliminazione {{idx}}/{{total}}",
+        "copying": "Copia {{idx}}/{{total}}",
+        "moving": "Spostamento {{idx}}/{{total}}",
+        "uploading": "Caricamento {{idx}}/{{total}}",
         "err_403": "Non si dispone delle autorizzazioni richieste",
         "err_429": "Troppe richieste contemporanee",
         "err_generic": "Impossibile accedere alla risorsa richiesta",

templates/common/base.html

@@ -311,6 +311,16 @@ explicit grant from the SFTPGo Team ([email protected]).
         }
     }
 
+    function clearLoading() {
+        $('#loading_info').text("");
+        $('#loading_message').text("");
+    }
+
+    function setLoadingText(info, message) {
+        $('#loading_info').text(info);
+        $('#loading_message').text(message);
+    }
+
     KTUtil.onDOMContentLoaded(function () {
         var dismissErrorBtn = $('#id_dismiss_error_msg');
         if (dismissErrorBtn){
@@ -900,7 +910,8 @@ explicit grant from the SFTPGo Team ([email protected]).
         </div>
         <div class="page-loader flex-column">
 			<span class="spinner-border text-primary" role="status"></span>
-			<span id="loading_message" class="text-muted fs-4 fw-semibold mt-5"></span>
+			<span id="loading_info" class="text-muted fs-4 fw-semibold mt-5"></span>
+            <span id="loading_message" class="text-muted fs-4 fw-semibold mt-5"></span>
 		</div>
 
         <div class="modal fade" tabindex="-1" id="modal_alert">

templates/webadmin/admins.html

@@ -125,7 +125,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username);
 
@@ -187,7 +187,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username)+"/2fa/disable";
 

templates/webadmin/configs.html

@@ -402,7 +402,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             return;
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         let data = {"base_redirect_url": getCurrentURI(), "provider": parseInt($('#idSMTPOAuth2Provider').val()),
@@ -499,7 +499,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
         let debug = 0;
         if ($('#idSMTPDebug').is(':checked')){

templates/webadmin/connections.html

@@ -82,7 +82,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.ConnectionsURL}}' + "/" + encodeURIComponent(connectionID);
                 if (node) {

templates/webadmin/defender.html

@@ -78,7 +78,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.DefenderHostsURL}}' + "/" + encodeURIComponent(id);
 

templates/webadmin/eventactions.html

@@ -78,7 +78,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventActionURL}}' + "/" + encodeURIComponent(name);
 

templates/webadmin/eventrules.html

@@ -80,7 +80,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventRuleURL}}' + "/" + encodeURIComponent(name);
 
@@ -135,7 +135,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.EventRuleURL}}' + "/run/" + encodeURIComponent(name);
 

templates/webadmin/folders.html

@@ -110,7 +110,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.FolderURL}}' + "/" + encodeURIComponent(name);
 

templates/webadmin/groups.html

@@ -96,7 +96,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.GroupURL}}' + "/" + encodeURIComponent(name);
 

templates/webadmin/iplists.html

@@ -210,7 +210,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.IPListURL}}' + "/" + encodeURIComponent(listType)+ "/" + encodeURIComponent(ipNet);
                 axios.delete(path, {

templates/webadmin/roles.html

@@ -97,7 +97,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.RoleURL}}' + "/" + encodeURIComponent(name);
 

templates/webadmin/users.html

@@ -145,7 +145,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.UserURL}}' + "/" + encodeURIComponent(username);
 
@@ -200,7 +200,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.UserURL}}' + "/" + encodeURIComponent(username)+"/2fa/disable";
 
@@ -230,7 +230,7 @@ explicit grant from the SFTPGo Team ([email protected]).
     }
 
     function quotaScanAction(username) {
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
         let path = '{{.QuotaScanURL}}' + "/" + encodeURIComponent(username);
         axios.post(path, null, {

templates/webclient/files.html

@@ -1168,7 +1168,7 @@ explicit grant from the SFTPGo Team ([email protected]).
                             if (selectedRowsIdx.length == 0){
                                 return;
                             }
-                            $('#loading_message').text("");
+                            clearLoading();
                             KTApp.showPageLoading();
 
                             function deleteSelected() {
@@ -1190,15 +1190,14 @@ explicit grant from the SFTPGo Team ([email protected]).
                                 }
                                 path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+itemName);
 
-                                let deleteTxt = "";
                                 if (selectedRowsIdx.length > 1){
-                                    deleteTxt = $.t('fs.deleting', {
+                                    let info = $.t('fs.deleting', {
                                         idx : index + 1,
-                                        total: selectedRowsIdx.length,
-                                        name: itemName
+                                        total: selectedRowsIdx.length
                                     });
+                                    setLoadingText(info,itemName);
                                 }
-                                $('#loading_message').text(deleteTxt);
+
                                 axios.delete(path,{
                                     timeout: 15000,
                                     headers: {
@@ -1400,7 +1399,7 @@ explicit grant from the SFTPGo Team ([email protected]).
         let hasError = false;
         let index = 0;
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function copyItem() {
@@ -1425,12 +1424,11 @@ explicit grant from the SFTPGo Team ([email protected]).
             targetPath+=item.targetName;
 
             if (items.length > 1) {
-                msgTxt = $.t('fs.copying', {
+                let info = $.t('fs.copying', {
                     idx: index + 1,
-                    total: items.length,
-                    name: `${sourcePath} => ${targetPath}`
+                    total: items.length
                 });
-                $('#loading_message').text(msgTxt);
+                setLoadingText(info,`${sourcePath} => ${targetPath}`);
             }
             let path = '{{.FileActionsURL}}/copy';
             path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+item.sourceName)+'&target='+item.targetDir+encodeURIComponent("/"+item.targetName);
@@ -1550,7 +1548,7 @@ explicit grant from the SFTPGo Team ([email protected]).
         let hasError = false;
         let index = 0;
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function moveItem() {
@@ -1575,12 +1573,11 @@ explicit grant from the SFTPGo Team ([email protected]).
             targetPath+=item.targetName;
 
             if (items.length > 1) {
-                msgTxt = $.t('fs.moving', {
+                let info = $.t('fs.moving', {
                     idx: index + 1,
-                    total: items.length,
-                    name: `${sourcePath} => ${targetPath}`
+                    total: items.length
                 });
-                $('#loading_message').text(msgTxt);
+                setLoadingText(info,`${sourcePath} => ${targetPath}`);
             }
             let path = '{{.FileActionsURL}}/move';
             path+='?path={{.CurrentDir}}'+encodeURIComponent("/"+item.sourceName)+'&target='+item.targetDir+encodeURIComponent("/"+item.targetName);
@@ -1690,7 +1687,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let isDir = (getTypeFromMeta(meta) == "1");
                 let path;
@@ -1822,7 +1819,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             return;
         }
 
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function executeRename() {
@@ -1985,7 +1982,7 @@ explicit grant from the SFTPGo Team ([email protected]).
         let success = 0;
         let checkedDirs = [];
         $('#errorMsg').addClass("d-none");
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function uploadFile() {
@@ -2024,16 +2021,15 @@ explicit grant from the SFTPGo Team ([email protected]).
                 lastModified = "";
             }
 
-            let uploadTxt = f.name;
+            let info = "";
             if (files.length > 1){
-                uploadTxt = $.t('fs.uploading', {
+                info = $.t('fs.uploading', {
                     idx: index + 1,
-                    total: files.length,
-                    name: uploadTxt
+                    total: files.length
                 });
             }
 
-            $('#loading_message').text(uploadTxt);
+            setLoadingText(info,f.name);
 
             axios.post(uploadPath, f, {
                 headers: {
@@ -2046,7 +2042,7 @@ explicit grant from the SFTPGo Team ([email protected]).
                     }
                     const percentage = Math.round((100 * progressEvent.loaded) / progressEvent.total);
                     if (percentage > 0 && percentage < 100){
-                        $('#loading_message').text(`${uploadTxt} ${percentage}%`);
+                        setLoadingText(info,`${f.name} ${percentage}%`);
                     }
                 },
                 validateStatus: function (status) {

templates/webclient/shares.html

@@ -176,7 +176,7 @@ explicit grant from the SFTPGo Team ([email protected]).
             }
         }).then((result) => {
             if (result.isConfirmed){
-                $('#loading_message').text("");
+                clearLoading();
                 KTApp.showPageLoading();
                 let path = '{{.ShareURL}}' + "/" + encodeURIComponent(shareID);
 

templates/webclient/shareupload.html

@@ -60,7 +60,7 @@ explicit grant from the SFTPGo Team ([email protected]).
         let success = 0;
         let checkedDirs = [];
         $('#errorMsg').addClass("d-none");
-        $('#loading_message').text("");
+        clearLoading();
         KTApp.showPageLoading();
 
         function uploadFile() {
@@ -103,16 +103,15 @@ explicit grant from the SFTPGo Team ([email protected]).
                 lastModified = "";
             }
 
-            let uploadTxt = f.name;
+            let info = "";
             if (files.length > 1){
-                uploadTxt = $.t('fs.uploading', {
+                info = $.t('fs.uploading', {
                     idx: index + 1,
-                    total: files.length,
-                    name: uploadTxt
+                    total: files.length
                 });
             }
 
-            $('#loading_message').text(uploadTxt);
+            setLoadingText(info,f.name);
 
             axios.post(uploadPath, f, {
                 headers: {
@@ -125,7 +124,7 @@ explicit grant from the SFTPGo Team ([email protected]).
                     }
                     const percentage = Math.round((100 * progressEvent.loaded) / progressEvent.total);
                     if (percentage > 0 && percentage < 100){
-                        $('#loading_message').text(`${uploadTxt} ${percentage}%`);
+                        setLoadingText(info,`${f.name} ${percentage}%`);
                     }
                 },
                 validateStatus: function (status) {