From 5e409bf737df5c17779110ae5d8df99124852d88 Mon Sep 17 00:00:00 2001 From: Sharadhi98 <40205440+Sharadhi98@users.noreply.github.com> Date: Tue, 26 Nov 2024 10:20:29 -0500 Subject: [PATCH] SAK-40229 Content screen reader announcing file upload to dropbox (#12995) Co-authored-by: Sharadhi --- .../resources/types.properties | 1 + .../sakai_dropbox_multiple_folders_upload.vm | 93 +++++++++++-------- 2 files changed, 56 insertions(+), 38 deletions(-) diff --git a/content/content-bundles/resources/types.properties b/content/content-bundles/resources/types.properties index 5c41b45c4a7b..002643a2c417 100644 --- a/content/content-bundles/resources/types.properties +++ b/content/content-bundles/resources/types.properties @@ -233,6 +233,7 @@ processmessage.save.html=Saving HTML page processmessage.save.text=Saving text document processmessage.save.file=Saving new file(s) processmessage.save.url=Saving link(s) +label.success = Successfully uploaded: {0} label.time = Time: label.update = Update label.upl = Upload New Version Now diff --git a/content/content-tool/tool/src/webapp/vm/resources/sakai_dropbox_multiple_folders_upload.vm b/content/content-tool/tool/src/webapp/vm/resources/sakai_dropbox_multiple_folders_upload.vm index 3fbfd9053903..5597bf192b4e 100644 --- a/content/content-tool/tool/src/webapp/vm/resources/sakai_dropbox_multiple_folders_upload.vm +++ b/content/content-tool/tool/src/webapp/vm/resources/sakai_dropbox_multiple_folders_upload.vm @@ -25,6 +25,9 @@ #end +
+ $tlang.getString('label.success') +
@@ -186,47 +189,61 @@ { const fileField = document.getElementById('MultipleFolderContent'); const nameField = document.getElementById('MultipleFolderDisplayName'); + const feedback = document.getElementById('fileUploadFeedback'); - ## Goal: update the display name field. But if the user provided their own display name, don't overwrite it + if (fileField.files.length > 0) + { + feedback.textContent = `$tlang.getString('label.success')`.replace("{0}", fileField.files[0].name); + feedback.classList.remove('d-none'); -#if ($!alreadyUploadedFile) - ## A file was uploaded to the server, and there was a validation error; track if the file name matches the serverside file - let matchesPreviousFile = nameField.value.trim() == "$validator.escapeHtml("$alreadyUploadedFile.getFileName()")".trim(); -#else - ## A file was not yet uploaded to the server - let matchesPreviousFile = false; -#end - ## Compare with the name of the last selected file in the file picker - matchesPreviousFile = matchesPreviousFile || nameField.value.trim() == previousFileName.trim(); - if (nameField.value == null || nameField.value.trim() == '' || matchesPreviousFile) - { - ## User hasn't changed the display name; overwrite it - nameField.value = fileField.files[0].name; - } - previousFileName = fileField.files[0].name; + ## Goal: update the display name field. But if the user provided their own display name, don't overwrite it - #* - * Goal: validate the filesize. - * Note: the server doesn't accept files slightly under uploadMaxSize (default 20 MB), and the user's request is rejected. - * I suspect that validation occurs on the entire http post, and I'm unsure how to address this, but this validation is useful for most cases. - *# - #if ($!uploadMaxSize) - const maxFileSize = $!uploadMaxSize * 1024 * 1024; - const resourceAlert = document.getElementById('resourceAlert'); - const submitButton = document.getElementById('saveChanges'); - if (fileField.files[0].size > maxFileSize) - { - resourceAlert.innerText = "$tlang.getFormattedMessage('size.exceeded', $!uploadMaxSize)"; - resourceAlert.classList.remove('d-none'); - submitButton.disabled = true; - } - else - { - resourceAlert.classList.add('d-none'); - resourceAlert.innerText = ''; - submitButton.disabled = false; - } - #end + #if ($!alreadyUploadedFile) + ## A file was uploaded to the server, and there was a validation error; track if the file name matches the serverside file + let matchesPreviousFile = nameField.value.trim() == "$validator.escapeHtml("$alreadyUploadedFile.getFileName()")".trim(); + + #else + ## A file was not yet uploaded to the server + let matchesPreviousFile = false; + #end + + ## Compare with the name of the last selected file in the file picker + matchesPreviousFile = matchesPreviousFile || nameField.value.trim() == previousFileName.trim(); + if (nameField.value == null || nameField.value.trim() == '' || matchesPreviousFile) + { + ## User hasn't changed the display name; overwrite it + nameField.value = fileField.files[0].name; + } + previousFileName = fileField.files[0].name; + + #* + * Goal: validate the filesize. + * Note: the server doesn't accept files slightly under uploadMaxSize (default 20 MB), and the user's request is rejected. + * I suspect that validation occurs on the entire http post, and I'm unsure how to address this, but this validation is useful for most cases. + *# + #if ($!uploadMaxSize) + const maxFileSize = $!uploadMaxSize * 1024 * 1024; + const resourceAlert = document.getElementById('resourceAlert'); + const submitButton = document.getElementById('saveChanges'); + if (fileField.files[0].size > maxFileSize) + { + resourceAlert.innerText = "$tlang.getFormattedMessage('size.exceeded', $!uploadMaxSize)"; + resourceAlert.classList.remove('d-none'); + submitButton.disabled = true; + } + else + { + resourceAlert.classList.add('d-none'); + resourceAlert.innerText = ''; + submitButton.disabled = false; + } + #end + } + else + { + feedback.classList.add('d-none'); + nameField.value = ''; + } }