diff options
| -rw-r--r-- | js/attachment.js | 15 | ||||
| -rw-r--r-- | skins/standard/attachment.css | 8 | ||||
| -rw-r--r-- | template/en/default/attachment/createformcontents.html.tmpl | 5 | ||||
| -rw-r--r-- | template/en/default/global/header.html.tmpl | 1 |
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'), }, |