diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js index 4b49bf06e..c9fa79ff4 100644 --- a/app/assets/javascripts/fileUpload.js +++ b/app/assets/javascripts/fileUpload.js @@ -12,12 +12,13 @@ `); - // Screen reader live region const $srStatus = $('#upload-status-live'); if ($srStatus.length) { - $srStatus.text('File is uploading'); - } else { - this.$form.prepend(`File is uploading`); + // Clear and re-set the content to ensure it's treated as a change + $srStatus.html(''); + setTimeout(() => { + $srStatus.html('File is uploading'); + }, 50); } }; @@ -25,19 +26,21 @@ this.$form = $(component); - // The label gets styled like a button and is used to hide the native file upload control. This is so that - // users see a button that looks like the others on the site. - - this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} ); + // Handle "Upload your file" button click — CSP-safe version + this.$form.on('click', '[data-module="upload-trigger"]', function () { + const inputId = $(this).data('file-input-id'); + const fileInput = document.getElementById(inputId); + if (fileInput) fileInput.click(); + }); // Clear the form if the user navigates back to the page $(window).on("pageshow", () => this.$form[0].reset()); - // Need to put the event on the container, not the input for it to work properly - this.$form.on( - 'change', '.file-upload-field', - () => this.submit() && this.showCancelButton() - ); + // Watch for file input changes + this.$form.on('change', '.file-upload-field', () => { + this.submit(); + this.showCancelButton(); + }); }; diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html index 27989ee8f..9a52b9eb6 100644 --- a/app/templates/components/file-upload.html +++ b/app/templates/components/file-upload.html @@ -27,17 +27,21 @@ {{ field(**{ 'class': 'file-upload-field', + 'id': field.name, 'accept': allowed_file_extensions|format_list_items('.{item}')|join(',')|e }) }} - + {% if alternate_link and alternate_link_text %} or {{ alternate_link_text }} {% endif %} - + {{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }} diff --git a/app/templates/views/check/column-errors.html b/app/templates/views/check/column-errors.html index a24b5de3e..3b527fed6 100644 --- a/app/templates/views/check/column-errors.html +++ b/app/templates/views/check/column-errors.html @@ -21,7 +21,6 @@ Error {% block maincolumn_content %}
- {% call banner_wrapper(type='dangerous') %} {% if recipients.too_many_rows %} @@ -132,7 +131,6 @@ Error {% endif %} - {% endcall %}
@@ -150,7 +148,7 @@ Error ) }} {% endif %} - Back to top + Back to top {% endif %} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index eec54ed72..3e6c4af9b 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -27,6 +27,7 @@ show_errors=False )}} +

Your file needs to look like this example