Bug 1469333 - Check attachment file size client-side and inform user of too large file before uploading it

4 files changed, 27 insertions, 2 deletions

diff --git a/js/attachment.js b/js/attachment.js
index f967f64d3..6d6dae58d 100644
--- a/js/attachment.js
+++ b/js/attachment.js
@@ -93,6 +93,21 @@ function DataFieldHandler() {
             }
         }
     }
+
+    // Check the current file size (in KB)
+    const file_size = field_data.files[0].size / 1024;
+    const max_size = BUGZILLA.param.maxattachmentsize;
+    const invalid = file_size > max_size;
+    const message = invalid ? `This file (<strong>${(file_size / 1024).toFixed(1)} MB</strong>) is larger than the ` +
+      `maximum allowed size (<strong>${(max_size / 1024).toFixed(1)} MB</strong>).<br>Please consider uploading it ` +
+      `to an online file storage and sharing the link in a bug comment instead.` : '';
+    const message_short = invalid ? 'File too large' : '';
+    const $error = document.querySelector('#data-error');
+
+    // Show an error message if the file is too large
+    $error.innerHTML = message;
+    field_data.setCustomValidity(message_short);
+    field_data.setAttribute('aria-invalid', invalid);
 }
 
 function clearAttachmentFields() {
diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css
index ace4b6781..401bce92b 100644
--- a/skins/standard/attachment.css
+++ b/skins/standard/attachment.css
@@ -38,6 +38,14 @@ table#attachment_flags td {
     font-size: small;
 }
 
+#data-error {
+    margin: 4px 0 0;
+}
+
+#data-error:empty {
+    margin: 0;
+}
+
 /* Rules used to view patches in diff mode. */
 
 .file_head {
diff --git a/template/en/default/attachment/createformcontents.html.tmpl b/template/en/default/attachment/createformcontents.html.tmpl
index 41a02a913..61ddceac3 100644
--- a/template/en/default/attachment/createformcontents.html.tmpl
+++ b/template/en/default/attachment/createformcontents.html.tmpl
@@ -37,7 +37,8 @@
     <em>Enter the path to the file on your computer</em> (or
     <a id="attachment_data_controller">
     paste text as attachment</a>).<br>
-    <input type="file" id="data" name="data" size="50">
+    <input type="file" id="data" name="data" size="50" aria-errormessage="data-error" aria-invalid="false">
+    <div id="data-error" class="warning" aria-live="assertive"><div>
   </td>
 </tr>
 <tr class="attachment_text_field">
@@ -69,7 +70,7 @@
     [%# Reset this whenever the page loads so that the JS state is up to date %]
     <script [% script_nonce FILTER none %]>
       $(function() {
-        $("#file").on("change", function() {
+        $("#data").on("change", function() {
           DataFieldHandler();
           // Fire event to keep take-bug in sync.
           $("#ispatch").change();
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 771fa801b..492d70a24 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -106,6 +106,7 @@
 
     [%- js_BUGZILLA = {
             param => {
+                maxattachmentsize => Param('maxattachmentsize'),
                 maxusermatches => Param('maxusermatches'),
                 splinter_base => Param('splinter_base'),
             },