diff --git a/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl b/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
index 087103963a..c88b0b7d2a 100644
--- a/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
+++ b/extensions/GuidedBugEntry/template/en/default/guided/guided.html.tmpl
@@ -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'
    ]
 %]
 
@@ -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="">
@@ -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>
diff --git a/extensions/GuidedBugEntry/web/js/guided.js b/extensions/GuidedBugEntry/web/js/guided.js
index 2e514ec284..5391e16727 100644
--- a/extensions/GuidedBugEntry/web/js/guided.js
+++ b/extensions/GuidedBugEntry/web/js/guided.js
@@ -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');
     });
@@ -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() {