Skip to content

Bug 1970156 - Uploading file larger than upload size limit using guided interface silently fails #2452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dklawren wants to merge 1 commit into
base: master
Choose a base branch
from
+65 −39
Open

Bug 1970156 - Uploading file larger than upload size limit using guided interface silently fails #2452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 21 additions & 22 deletions extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,18 @@
[% js_urls = [ 'extensions/GuidedBugEntry/web/js/products.js',
'extensions/GuidedBugEntry/web/js/guided.js',
'extensions/ProdCompSearch/web/js/prod_comp_search.js',
'js/field.js', 'js/TUI.js', 'js/data-table.js', 'js/bug.js' ] %]
'js/field.js', 'js/TUI.js', 'js/data-table.js',
'js/bug.js', 'js/attachment.js' ] %]

[% PROCESS global/header.html.tmpl
title = "Enter A Bug"
generate_api_token = 1
javascript_urls = js_urls
style_urls = [
style_urls = [
'skins/standard/global.css',
'extensions/GuidedBugEntry/web/style/guided.css',
'skins/standard/index.css'
'skins/standard/index.css',
'skins/standard/attachment.css'
]
%]

Expand Down Expand Up @@ -349,7 +352,7 @@ Product: <b><span id="dupes_product_name">?</span></b>:

[% INCLUDE page_title %]

<form method="post" action="[% basepath FILTER none %]post_bug.cgi" enctype="multipart/form-data" onsubmit="return bugForm.validate()">
<form method="post" id="bugform" action="[% basepath FILTER none %]post_bug.cgi" enctype="multipart/form-data" onsubmit="return bugForm.validate()">
<input type="hidden" name="filed_via" value="guided_form">
<input type="hidden" name="token" value="[% token FILTER html %]">
<input type="hidden" name="product" id="product" value="">
Expand Down Expand Up @@ -493,24 +496,20 @@ explain how to write effective [% terms.bug %] reports.</li>
</tr>

<tr>
<td class="label">Attach a file:</td>
<td colspan="2">
<input type="file" name="data" id="data" size="50" onchange="bugForm.onFileChange()">
<input type="hidden" name="contenttypemethod" value="autodetect">
<button id="reset_data" onclick="return bugForm.onFileClear()" disabled>Clear</button>
</td>
<td valign="top">
[% PROCESS help id="file_help" %]
<div id="file_help" class="help" role="tooltip" hidden>
If a file helps explain the issue better, such as a screenshot, please
attach one here.
</div>
</td>
</tr>
<tr id="data_description_tr">
<td class="label">File Description:</td>
<td colspan="2"><input type="text" name="description" id="data_description" class="textInput" disabled></td>
<td>&nbsp;</td>
<td colspan="3">
<div id="attach-file-action-outer">
<button type="button" id="attach-new-file" class="secondary">Attach New File</button>
</div>
<div id="attach-file-content-outer" hidden>
<button type="button" id="attach-no-file" class="secondary">Don’t Attach File</button>
<table class="attachment_entry responsive">
[% PROCESS attachment/createformcontents.html.tmpl
flag_types = product.flag_types.attachment
any_flags_requesteeble = 1
flag_table_id ="attachment_flags" %]
</table>
</div>
</td>
</tr>

<tr>
Expand Down
61 changes: 44 additions & 17 deletions extensions/GuidedBugEntry/web/js/guided.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -586,7 +586,7 @@ var bugForm = {
this.resetSubmitButton();
if (document.getElementById('component_select').length == 0)
this.onProductUpdated();
this.onFileChange();
this.initAttachmentSection();
this._mandatoryFields.forEach((id) => {
document.getElementById(id).classList.remove('missing');
});
Expand Down Expand Up @@ -794,23 +794,50 @@ var bugForm = {
document.getElementById('version').value = version;
},

onFileChange: function() {
// toggle ui enabled when a file is uploaded or cleared
var elFile = document.getElementById('data');
var elReset = document.getElementById('reset_data');
var elDescription = document.getElementById('data_description');
var filename = bugForm._getFilename();
elReset.disabled = !filename;
elDescription.value = filename || '';
elDescription.disabled = !filename;
document.getElementById('reset_data').classList.toggle('hidden', !filename);
document.getElementById('data_description_tr').classList.toggle('hidden', !filename);
},
initAttachmentSection: function() {
// Hide expert parts of the attachment form for guided
var elements = [...document.querySelectorAll('.expert_fields')];
for (var i = 0; i < elements.length; i++) {
elements[i].classList.add('bz_tui_hidden');
}

const $form = document.querySelector('#bugform');
const $attachNewFile = document.querySelector('#attach-new-file');
const $attachFileContentOuter = document.querySelector('#attach-file-content-outer');
const $attachNoFile = document.querySelector('#attach-no-file');
const $attachFileActionOuter = document.querySelector('#attach-file-action-outer');

const updatedRequiredFields = (required) => {
$attachFileContentOuter.querySelectorAll('[aria-required]').forEach(($input) => {
$input.setAttribute('aria-required', required);
});
};

$attachNewFile.addEventListener('click', () => {
$attachFileActionOuter.hidden = true;
$attachFileContentOuter.hidden = false;
updatedRequiredFields(true);
});

$attachNoFile.addEventListener('click', () => {
$attachFileActionOuter.hidden = false;
$attachFileContentOuter.hidden = true;

// Reset all the input values under Attachment
$form.attach_text.value = '';
$form.description.value = '';
$form.ispatch.checked = false;
$form.hide_preview.checked = false;
$form.contenttypemethod.checked = true;
$form.contenttypeselection.selectedIndex = 0;
$form.contenttypeentry.value = '';
document.querySelectorAll('#attachment_flags select').forEach(($select) => {
$select.selectedIndex = 0;
});
updatedRequiredFields(false);
});

onFileClear: function() {
document.getElementById('data').value = '';
this.onFileChange();
return false;
updatedRequiredFields(false);
},

_getFilename: function() {
Expand Down