WebClient: improve readability of upload progress
Some checks are pending
Code scanning - action / CodeQL-Build (push) Waiting to run
CI / Test and deploy (push) Waiting to run
CI / Test build flags (push) Waiting to run
CI / Test with PgSQL/MySQL/Cockroach (push) Waiting to run
CI / Build Linux packages (push) Waiting to run
CI / golangci-lint (push) Waiting to run
Docker / Build (push) Waiting to run

Fixes #1773

Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
This commit is contained in:
Nicola Murino 2024-10-03 18:53:57 +02:00
parent 6626c8846b
commit 3b2f709aeb
No known key found for this signature in database
GPG key ID: 935D2952DEC4EECF
17 changed files with 64 additions and 58 deletions

View file

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

View file

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

View file

@ -311,6 +311,16 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
} }
} }
function clearLoading() {
$('#loading_info').text("");
$('#loading_message').text("");
}
function setLoadingText(info, message) {
$('#loading_info').text(info);
$('#loading_message').text(message);
}
KTUtil.onDOMContentLoaded(function () { KTUtil.onDOMContentLoaded(function () {
var dismissErrorBtn = $('#id_dismiss_error_msg'); var dismissErrorBtn = $('#id_dismiss_error_msg');
if (dismissErrorBtn.length){ if (dismissErrorBtn.length){
@ -911,7 +921,8 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
</div> </div>
<div class="page-loader flex-column"> <div class="page-loader flex-column">
<span class="spinner-border text-primary" role="status"></span> <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>
<div class="modal fade" tabindex="-1" id="modal_alert"> <div class="modal fade" tabindex="-1" id="modal_alert">

View file

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

View file

@ -647,7 +647,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
return; return;
} }
$('#loading_message').text(""); clearLoading();
KTApp.showPageLoading(); KTApp.showPageLoading();
let data = {"base_redirect_url": getCurrentURI(), "provider": parseInt($('#idSMTPOAuth2Provider').val()), let data = {"base_redirect_url": getCurrentURI(), "provider": parseInt($('#idSMTPOAuth2Provider').val()),
@ -744,7 +744,7 @@ explicit grant from the SFTPGo Team (support@sftpgo.com).
} }
} }
$('#loading_message').text(""); clearLoading();
KTApp.showPageLoading(); KTApp.showPageLoading();
let debug = 0; let debug = 0;
if ($('#idSMTPDebug').is(':checked')){ if ($('#idSMTPDebug').is(':checked')){

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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