diff --git a/server/crashmanager/forms.py b/server/crashmanager/forms.py
index d42530bb..ba11914a 100644
--- a/server/crashmanager/forms.py
+++ b/server/crashmanager/forms.py
@@ -58,7 +58,7 @@ class Meta:
             "description": "Bug description",
             "security": "This is a security bug",
             "security_group": "Security group",
-            "testcase_filename": "Filename that will be used for the testcase",
+            "testcase_filename": "Testcase basename (without extension)",
             "blocks": "Blocks",
             "dependson": "Depends On",
         }
@@ -89,7 +89,7 @@ class Meta:
         labels = {
             "name": "Template name",
             "comment": "Comment",
-            "testcase_filename": "Filename that will be used for the testcase",
+            "testcase_filename": "Testcase basename (without extension)",
         }
         widgets = {
             "name": TextInput(),
diff --git a/server/crashmanager/migrations/0021_bugzilla_template_basename.py b/server/crashmanager/migrations/0021_bugzilla_template_basename.py
new file mode 100644
index 00000000..50894385
--- /dev/null
+++ b/server/crashmanager/migrations/0021_bugzilla_template_basename.py
@@ -0,0 +1,20 @@
+from django.db import migrations
+
+
+def strip_template_extensions(apps, schema_editor):
+    Template = apps.get_model("crashmanager", "BugzillaTemplate")
+    templates = Template.objects.using(schema_editor.connection.alias)
+    for template in templates.exclude(testcase_filename="").iterator():
+        filename = template.testcase_filename
+        if "." in filename:
+            templates.filter(pk=template.pk).update(
+                testcase_filename=filename.rsplit(".", 1)[0]
+            )
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("crashmanager", "0020_alter_bucket_optimizedsignature_and_more"),
+    ]
+
+    operations = [migrations.RunPython(strip_template_extensions)]
diff --git a/server/crashmanager/models.py b/server/crashmanager/models.py
index ac009f7b..777be5e0 100644
--- a/server/crashmanager/models.py
+++ b/server/crashmanager/models.py
@@ -932,6 +932,7 @@ class BugzillaTemplate(models.Model):
     security = models.BooleanField(blank=False, default=False)
     security_group = models.TextField(blank=True)
     comment = models.TextField(blank=True)
+    # Stores only the basename; attachments use the original testcase extension.
     testcase_filename = models.TextField(blank=True)
     blocks = models.TextField(blank=True)
     dependson = models.TextField(blank=True)
diff --git a/server/crashmanager/tests/test_bugs.py b/server/crashmanager/tests/test_bugs.py
index 071b669e..2c7c7856 100644
--- a/server/crashmanager/tests/test_bugs.py
+++ b/server/crashmanager/tests/test_bugs.py
@@ -10,9 +10,13 @@
 """
 
 import logging
+from importlib import import_module
+from types import SimpleNamespace
 
 import pytest
 import requests
+from django.apps import apps
+from django.db import connection
 from django.urls import reverse
 
 from crashmanager.models import BugzillaTemplate
@@ -287,3 +291,23 @@ def test_create_external_bug_comment_simple_get(client, cm):
     )
     LOG.debug(response)
     assert response.status_code == requests.codes["ok"]
+
+
+@pytest.mark.parametrize(
+    ("filename", "basename"),
+    [
+        ("testcase.zip", "testcase"),
+        ("testcase.html", "testcase"),
+        ("testcase.min.js", "testcase.min"),
+        ("testcase", "testcase"),
+        ("", ""),
+    ],
+)
+def test_template_basename_migration(cm, filename, basename):
+    template = cm.create_template()
+    template.testcase_filename = filename
+    template.save()
+    migration = import_module("crashmanager.migrations.0021_bugzilla_template_basename")
+    migration.strip_template_extensions(apps, SimpleNamespace(connection=connection))
+    template.refresh_from_db()
+    assert template.testcase_filename == basename
diff --git a/server/frontend/src/components/Bugs/Comments/PublicationForm.vue b/server/frontend/src/components/Bugs/Comments/PublicationForm.vue
index bb123bb5..92857e19 100644
--- a/server/frontend/src/components/Bugs/Comments/PublicationForm.vue
+++ b/server/frontend/src/components/Bugs/Comments/PublicationForm.vue
@@ -235,7 +235,7 @@ import { defineComponent } from "vue";
 import * as api from "../../../api";
 import * as bugzillaApi from "../../../bugzilla_api";
 import * as HandlebarsHelpers from "../../../handlebars_helpers";
-import { errorParser } from "../../../helpers";
+import { errorParser, parseFilename, buildFilename } from "../../../helpers";
 import CrashDataSection from "../CrashDataSection.vue";
 import HelpPopover from "../HelpPopover.vue";
 import TestCaseSection from "../TestCaseSection.vue";
@@ -395,7 +395,7 @@ export default defineComponent({
       return attachmentFilenameExtension;
     },
     filenameWithExtension() {
-      return this.fileName + "." + this.fileExtension;
+      return buildFilename(this.fileName, this.fileExtension);
     },
     fileMimetype() {
       const mimeType = mime.getType(this.filenameWithExtension);
@@ -417,6 +417,7 @@ export default defineComponent({
       this.provider = this.providers.find((p) => p.id === newVal);
     },
     selectedTemplate(newVal) {
+      this.newFileName = null;
       this.template = this.templates.find((t) => t.id === newVal);
     },
   },
@@ -573,19 +574,13 @@ export default defineComponent({
     getFileDetails() {
       let attachmentFilename = "";
       let attachmentFilenameExtension = "";
-      if (this.entry) {
-        // extract file name
-        const splittedAttachmentFilename = this.template?.testcase_filename
-          ? this.template.testcase_filename
-          : this.entry.testcase.split("/");
-
-        const attachmentFilenameAndExtension =
-          splittedAttachmentFilename[
-            splittedAttachmentFilename?.length - 1
-          ].split(".");
-
-        attachmentFilename = attachmentFilenameAndExtension[0];
-        attachmentFilenameExtension = attachmentFilenameAndExtension[1];
+      if (this.entry?.testcase) {
+        const { basename, extension } = parseFilename(
+          this.entry.testcase,
+          this.template?.testcase_filename,
+        );
+        attachmentFilename = basename;
+        attachmentFilenameExtension = extension;
       }
 
       return { attachmentFilename, attachmentFilenameExtension };
diff --git a/server/frontend/src/components/Bugs/PublicationForm.vue b/server/frontend/src/components/Bugs/PublicationForm.vue
index 588ac7da..6e6b809a 100644
--- a/server/frontend/src/components/Bugs/PublicationForm.vue
+++ b/server/frontend/src/components/Bugs/PublicationForm.vue
@@ -525,16 +525,6 @@
               class="form-control"
             />
           </div>
-          <div class="col-md-2">
-            <label for="file_extension">File extension:</label>
-            <input
-              id="file_extension"
-              type="text"
-              class="form-control"
-              disabled
-              :value="fileExtension"
-            />
-          </div>
         </div>
 
         <hr />
@@ -823,7 +813,9 @@ export default defineComponent({
     });
 
     watch([entry, template], () => {
-      if (entry.value) {
+      if (props.isBugTemplateCreation) {
+        fileName.value = template.value?.testcase_filename ?? "";
+      } else if (entry.value?.testcase) {
         const { basename, extension } = parseFilename(
           entry.value.testcase,
           template.value?.testcase_filename,
@@ -1123,7 +1115,7 @@ export default defineComponent({
 
       const payload = {
         ...template.value,
-        testcase_filename: filenameWithExtension.value,
+        testcase_filename: fileName.value,
         product: product.value,
         component: component.value,
         op_sys: opSys.value,
diff --git a/server/frontend/src/components/Bugs/TestCaseSection.vue b/server/frontend/src/components/Bugs/TestCaseSection.vue
index 71c92e44..30b233ca 100644
--- a/server/frontend/src/components/Bugs/TestCaseSection.vue
+++ b/server/frontend/src/components/Bugs/TestCaseSection.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import { defineComponent, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
 import * as api from "../../api";
 
 export default defineComponent({
@@ -85,7 +85,7 @@ export default defineComponent({
     },
     fileExtension: {
       type: String,
-      required: true,
+      default: null,
     },
     fileName: {
       type: String,
@@ -93,21 +93,17 @@ export default defineComponent({
     },
   },
 
-  emits: [
-    "update-not-attach-test",
-    "update-filename",
-    "update-content",
-    "update-attachment-extension",
-  ],
+  emits: ["update-not-attach-test", "update-filename", "update-content"],
   setup(props, { emit }) {
     const notAttachTest = ref(false);
-    const filename = ref("");
-    const filenameExtension = ref("");
+    const filename = computed({
+      get: () => props.fileName,
+      set: (value) => emit("update-filename", value),
+    });
     const content = ref("Content loading...");
 
     onMounted(async () => {
       notAttachTest.value = props.initialNotAttachTest;
-      filename.value = props.fileName;
 
       if (!props.entry.testcase_isbinary) {
         content.value = await api.retrieveCrashTestCase(props.entry.id);
@@ -119,15 +115,6 @@ export default defineComponent({
       emit("update-not-attach-test", newValue);
     });
 
-    watch(filename, (newValue) => {
-      if (newValue) {
-        emit("update-filename", newValue);
-      } else {
-        // Prevent removing the whole section when the filename input is empty
-        emit("update-filename", " ");
-      }
-    });
-
     watch(content, (newValue) => {
       emit("update-content", newValue);
     });
@@ -136,7 +123,6 @@ export default defineComponent({
       notAttachTest,
       filename,
       content,
-      filenameExtension,
     };
   },
 });
diff --git a/server/frontend/src/helpers.js b/server/frontend/src/helpers.js
index e037fdf5..3c0cd73b 100644
--- a/server/frontend/src/helpers.js
+++ b/server/frontend/src/helpers.js
@@ -224,7 +224,7 @@ export function formatMonthly(d) {
 /**
  * Parse a testcase file path into basename and extension.
  * @param {string} testcasePath - Testcase file path.
- * @param {string|null} templateBasename - Optional template basename or full filename.
+ * @param {string|null} templateBasename - Optional template basename (without an extension).
  * @returns {{basename: string, extension: string|null}} Object with basename and extension.
  */
 export function parseFilename(testcasePath, templateBasename = null) {
@@ -237,19 +237,9 @@ export function parseFilename(testcasePath, templateBasename = null) {
     ? originalParts[originalParts.length - 1]
     : null;
 
-  let basename;
-  if (templateBasename) {
-    // Templates store the complete filename, while the form edits the basename.
-    const suffix = extension ? `.${extension}` : null;
-    basename =
-      suffix && templateBasename.endsWith(suffix)
-        ? templateBasename.slice(0, -suffix.length)
-        : templateBasename;
-  } else {
-    basename = hasExtension
-      ? originalParts.slice(0, -1).join(".")
-      : originalParts[0];
-  }
+  const basename =
+    templateBasename ||
+    (hasExtension ? originalParts.slice(0, -1).join(".") : originalParts[0]);
 
   return { basename, extension };
 }
diff --git a/server/frontend/tests/bug_filenames.test.js b/server/frontend/tests/bug_filenames.test.js
new file mode 100644
index 00000000..97858de0
--- /dev/null
+++ b/server/frontend/tests/bug_filenames.test.js
@@ -0,0 +1,189 @@
+import { shallowMount, flushPromises } from "@vue/test-utils";
+import PublicationForm from "../src/components/Bugs/PublicationForm.vue";
+import CommentForm from "../src/components/Bugs/Comments/PublicationForm.vue";
+import TestCaseSection from "../src/components/Bugs/TestCaseSection.vue";
+import * as api from "../src/api";
+import * as bugzillaApi from "../src/bugzilla_api";
+
+jest.mock("../src/api");
+jest.mock("../src/bugzilla_api");
+jest.mock("mime", () => ({ getType: () => "text/plain" }));
+
+const template = (id, basename, mode = "bug") => ({
+  id,
+  mode,
+  name: `Template ${id}`,
+  testcase_filename: basename,
+  product: "Firefox",
+  component: "General",
+  version: "unspecified",
+  summary: "Crash",
+  description: "",
+  comment: "",
+  attrs: "",
+  cc: "",
+  blocks: "",
+  dependson: "",
+  keywords: "",
+  whiteboard: "",
+});
+
+beforeEach(() => {
+  jest.resetAllMocks();
+  api.listBugProviders.mockResolvedValue({
+    results: [
+      { id: 1, classname: "BugzillaProvider", hostname: "bugs.example.com" },
+    ],
+  });
+  api.retrieveCrash.mockResolvedValue({
+    id: 1,
+    testcase: "tests/original.html",
+    testcase_isbinary: false,
+    rawStderr: "crash",
+    shortSignature: "Crash",
+    os: "linux",
+    platform: "x86-64",
+  });
+  api.retrieveCrashTestCase.mockResolvedValue("test content");
+  bugzillaApi.createBug.mockResolvedValue({ id: 123 });
+});
+
+const mountForm = async (Component, props) => {
+  const wrapper = shallowMount(Component, {
+    props: { providerId: 1, templateId: 1, entryId: 1, bucketId: 1, ...props },
+    global: { stubs: { TestCaseSection: false } },
+  });
+  await flushPromises();
+  return wrapper;
+};
+
+test.each(["testcase", "testcase.min", ""])(
+  "template saves basename %j without the example ZIP extension",
+  async (basename) => {
+    api.listTemplates.mockResolvedValue({ results: [template(1, basename)] });
+    // Stop after capturing the request, before browser navigation.
+    api.updateBugzillaBugTemplate.mockRejectedValue(
+      new Error("stop navigation"),
+    );
+    const wrapper = await mountForm(PublicationForm, {
+      isBugTemplateCreation: true,
+    });
+    expect(wrapper.get("#testcase_filename").element.value).toBe(basename);
+    expect(wrapper.find("#file_extension").exists()).toBe(false);
+    await wrapper.vm.createOrUpdateBugzillaBugTemplate();
+    expect(api.updateBugzillaBugTemplate).toHaveBeenCalledWith(
+      1,
+      expect.any(FormData),
+    );
+    expect(
+      api.updateBugzillaBugTemplate.mock.calls[0][1].get("testcase_filename"),
+    ).toBe(basename);
+    wrapper.unmount();
+  },
+);
+
+test.each([
+  ["bug", PublicationForm],
+  ["comment", CommentForm],
+])(
+  "%s uses the selected template basename in the displayed field and attachment",
+  async (mode, Component) => {
+    api.listTemplates.mockResolvedValue({
+      results: [template(1, "testcase", mode), template(2, "repro.min", mode)],
+    });
+    const wrapper = await mountForm(Component);
+    expect(wrapper.get("#id_testcase_filename").element.value).toBe("testcase");
+    await wrapper.get("#id_testcase_filename").setValue("custom");
+    expect(wrapper.vm.filenameWithExtension).toBe("custom.html");
+    await wrapper.get("#bt_select").setValue("2");
+    expect(wrapper.get("#id_testcase_filename").element.value).toBe(
+      "repro.min",
+    );
+    expect(wrapper.get("#file_extension").element.value).toBe("html");
+    if (mode === "bug") await wrapper.vm.createExternalBug();
+    else await wrapper.vm.publishAttachments();
+    expect(bugzillaApi.createAttachment).toHaveBeenCalledWith(
+      expect.objectContaining({
+        file_name: "repro.min.html",
+      }),
+    );
+    wrapper.unmount();
+  },
+);
+
+test("filename input follows prop changes without emitting an edit", async () => {
+  const wrapper = shallowMount(TestCaseSection, {
+    props: {
+      entry: { testcase_isbinary: true },
+      template: {},
+      fileName: "testcase",
+      fileExtension: "html",
+    },
+  });
+  await flushPromises();
+  expect(wrapper.emitted("update-filename")).toBeUndefined();
+  await wrapper.setProps({ fileName: "repro" });
+  expect(wrapper.get("#id_testcase_filename").element.value).toBe("repro");
+  expect(wrapper.emitted("update-filename")).toBeUndefined();
+  await wrapper.get("#id_testcase_filename").setValue("custom");
+  expect(wrapper.emitted("update-filename")).toEqual([["custom"]]);
+});
+
+test("new templates store only the entered basename", async () => {
+  api.createBugzillaBugTemplate.mockRejectedValue(new Error("stop navigation"));
+  const wrapper = await mountForm(PublicationForm, {
+    isBugTemplateCreation: true,
+    templateId: null,
+  });
+  expect(wrapper.get("#testcase_filename").element.value).toBe("");
+  wrapper.vm.template.name = "New template";
+  wrapper.vm.template.version = "unspecified";
+  wrapper.vm.product = "Firefox";
+  wrapper.vm.component = "General";
+  await wrapper.get("#testcase_filename").setValue("testcase.min");
+  await wrapper.vm.createOrUpdateBugzillaBugTemplate();
+  expect(api.createBugzillaBugTemplate).toHaveBeenCalledTimes(1);
+  expect(
+    api.createBugzillaBugTemplate.mock.calls[0][0].get("testcase_filename"),
+  ).toBe("testcase.min");
+  wrapper.unmount();
+});
+
+test.each(["js", "zip", "bin", ""])(
+  "filing preserves the original extension %j",
+  async (extension) => {
+    const crash = await api.retrieveCrash();
+    crash.testcase = extension
+      ? `tests/original.${extension}`
+      : "tests/original";
+    api.listTemplates.mockResolvedValue({ results: [template(1, "testcase")] });
+    const wrapper = await mountForm(PublicationForm);
+    await wrapper.vm.createExternalBug();
+    expect(bugzillaApi.createAttachment).toHaveBeenCalledWith(
+      expect.objectContaining({
+        file_name: extension ? `testcase.${extension}` : "testcase",
+      }),
+    );
+    wrapper.unmount();
+  },
+);
+
+test.each([
+  ["bug", PublicationForm],
+  ["comment", CommentForm],
+])("%s filing supports crashes without a testcase", async (mode, Component) => {
+  const crash = await api.retrieveCrash();
+  crash.testcase = null;
+  api.listTemplates.mockResolvedValue({
+    results: [template(1, "testcase", mode)],
+  });
+  const wrapper = await mountForm(Component);
+  expect(wrapper.find("#id_testcase_filename").exists()).toBe(false);
+  if (mode === "bug") await wrapper.vm.createExternalBug();
+  else await wrapper.vm.publishAttachments();
+  expect(bugzillaApi.createAttachment).toHaveBeenCalledTimes(1);
+  expect(bugzillaApi.createAttachment).toHaveBeenCalledWith(
+    expect.objectContaining({ file_name: "crash_data.txt" }),
+  );
+  wrapper.unmount();
+});
diff --git a/server/frontend/tests/helpers.test.js b/server/frontend/tests/helpers.test.js
index 36c26b1e..63131494 100644
--- a/server/frontend/tests/helpers.test.js
+++ b/server/frontend/tests/helpers.test.js
@@ -9,22 +9,10 @@ describe("parseFilename", () => {
       { basename: "testcase", extension: "txt" },
     ],
     [
-      "template with the testcase extension",
-      "tests/original.js",
-      "testcase.js",
-      { basename: "testcase", extension: "js" },
-    ],
-    [
-      "template with multiple dots and the testcase extension",
-      "tests/original.js",
-      "testcase.min.js",
-      { basename: "testcase.min", extension: "js" },
-    ],
-    [
-      "template basename with an unrelated suffix",
-      "tests/original.js",
+      "template basename with dots is preserved",
+      "tests/original.html",
       "testcase.min",
-      { basename: "testcase.min", extension: "js" },
+      { basename: "testcase.min", extension: "html" },
     ],
     [
       "testcase without an extension",
@@ -75,14 +63,13 @@ describe("buildFilename", () => {
   });
 });
 
-test("saved template filenames survive repeated loading and saving", () => {
-  let filename = "testcase.js";
-  for (let i = 0; i < 3; i++) {
-    const { basename, extension } = parseFilename(
-      "tests/original.js",
-      filename,
+test.each(["html", "js", "zip", "bin"])(
+  "template basename uses the original %s extension",
+  (extension) => {
+    const parsed = parseFilename(`tests/original.${extension}`, "testcase");
+    expect(parsed.basename).toBe("testcase");
+    expect(buildFilename(parsed.basename, parsed.extension)).toBe(
+      `testcase.${extension}`,
     );
-    filename = buildFilename(basename, extension);
-    expect(filename).toBe("testcase.js");
-  }
-});
+  },
+);