Enable breadcrumbs in images multiple upload view

wagtail/images/templates/wagtailimages/multiple/add.html

@@ -1,4 +1,4 @@
-{% extends "wagtailadmin/base.html" %}
+{% extends "wagtailadmin/generic/base.html" %}
 {% load i18n %}
 {% load l10n %}
 {% load wagtailadmin_tags wagtailimages_tags %}
@@ -9,43 +9,38 @@
     {{ form_media.css }}
 {% endblock %}
 
-{% block content %}
-    {% trans "Add images" as add_str %}
-    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
+{% block main_content %}
+    <div class="drop-zone w-mt-8">
+        <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
+        <p>{{ help_text }}</p>
 
-    <div class="nice-padding">
-        <div class="drop-zone">
-            <p>{% trans "Drag and drop images into this area to upload immediately." %}</p>
-            <p>{{ help_text }}</p>
-
-            <form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
-                <div class="replace-file-input">
-                    <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
-                    <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages:add_multiple' %}" multiple>
-                </div>
-                {% csrf_token %}
-                {% if collections %}
-                    {% trans "Add to collection:" as label_text %}
-                    {% rawformattedfield label_text=label_text id_for_label="id_addimage_collection" classname="w-mx-auto w-mt-4 w-grid w-justify-center" %}
-                        <select id="id_addimage_collection" name="collection">
-                            {% for pk, display_name in collections.get_indented_choices %}
-                                <option value="{{ pk|unlocalize }}"{% if pk|unlocalize == selected_collection_id %} selected{% endif %} >
-                                    {{ display_name }}
-                                </option>
-                            {% endfor %}
-                        </select>
-                    {% endrawformattedfield %}
-                {% endif %}
-            </form>
-        </div>
-
-        <div id="overall-progress" class="progress progress-secondary">
-            <div class="bar" style="width: 0%;">0%</div>
-        </div>
-
-        <ul id="upload-list" class="upload-list multiple"></ul>
+        <form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
+            <div class="replace-file-input">
+                <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
+                <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages:add_multiple' %}" multiple>
+            </div>
+            {% csrf_token %}
+            {% if collections %}
+                {% trans "Add to collection:" as label_text %}
+                {% rawformattedfield label_text=label_text id_for_label="id_addimage_collection" classname="w-mx-auto w-mt-4 w-grid w-justify-center" %}
+                    <select id="id_addimage_collection" name="collection">
+                        {% for pk, display_name in collections.get_indented_choices %}
+                            <option value="{{ pk|unlocalize }}"{% if pk|unlocalize == selected_collection_id %} selected{% endif %} >
+                                {{ display_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                {% endrawformattedfield %}
+            {% endif %}
+        </form>
     </div>
 
+    <div id="overall-progress" class="progress progress-secondary">
+        <div class="bar" style="width: 0%;">0%</div>
+    </div>
+
+    <ul id="upload-list" class="upload-list multiple"></ul>
+
     <template id="upload-list-item">
         <li class="row">
             <div class="left col3">

wagtail/images/tests/test_admin_views.py

@@ -15,6 +15,7 @@ from django.utils.encoding import force_str
 from django.utils.html import escape, escapejs
 from django.utils.http import RFC3986_SUBDELIMS, urlencode
 from django.utils.safestring import mark_safe
+from django.utils.text import capfirst
 from willow.optimizers.base import OptimizerBase
 from willow.registry import registry
 
@@ -35,6 +36,7 @@ from wagtail.test.testapp.models import (
     VariousOnDeleteModel,
 )
 from wagtail.test.utils import WagtailTestUtils
+from wagtail.test.utils.template_tests import AdminTemplateTestUtils
 from wagtail.test.utils.timestamps import local_datetime
 
 from .utils import Image, get_test_image_file, get_test_image_file_svg
@@ -2336,7 +2338,7 @@ class TestImageChooserUploadViewWithLimitedPermissions(WagtailTestUtils, TestCas
         )
 
 
-class TestMultipleImageUploader(WagtailTestUtils, TestCase):
+class TestMultipleImageUploader(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     """
     This tests the multiple image upload views located in wagtailimages/views/multiple.py
     """
@@ -2366,6 +2368,17 @@ class TestMultipleImageUploader(WagtailTestUtils, TestCase):
         # definitions are being respected)
         self.assertNotContains(response, "wagtailadmin/js/draftail.js")
 
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {
+                    "url": reverse("wagtailimages:index"),
+                    "label": capfirst(self.image._meta.verbose_name_plural),
+                },
+                {"url": "", "label": "Add images"},
+            ],
+            response.content,
+        )
+
     @override_settings(WAGTAILIMAGES_MAX_UPLOAD_SIZE=1000)
     def test_add_max_file_size_context_variables(self):
         response = self.client.get(reverse("wagtailimages:add_multiple"))

wagtail/images/views/multiple.py

@@ -2,7 +2,10 @@ import os.path
 
 from django.template.loader import render_to_string
 from django.urls import reverse
+from django.utils.text import capfirst
+from django.utils.translation import gettext_lazy
 
+from wagtail.admin.views.generic.base import WagtailAdminTemplateMixin
 from wagtail.admin.views.generic.multiple_upload import AddView as BaseAddView
 from wagtail.admin.views.generic.multiple_upload import (
     CreateFromUploadView as BaseCreateFromUploadView,
@@ -19,10 +22,14 @@ from wagtail.images.permissions import ImagesPermissionPolicyGetter, permission_
 from wagtail.images.utils import find_image_duplicates
 
 
-class AddView(BaseAddView):
+class AddView(WagtailAdminTemplateMixin, BaseAddView):
     permission_policy = ImagesPermissionPolicyGetter()
     template_name = "wagtailimages/multiple/add.html"
+    header_icon = "image"
+    page_title = gettext_lazy("Add images")
+    _show_breadcrumbs = True
 
+    index_url_name = "wagtailimages:index"
     edit_object_url_name = "wagtailimages:edit_multiple"
     delete_object_url_name = "wagtailimages:delete_multiple"
     edit_object_form_prefix = "image"
@@ -35,6 +42,15 @@ class AddView(BaseAddView):
     context_upload_name = "uploaded_image"
     context_upload_id_name = "uploaded_file_id"
 
+    def get_breadcrumbs_items(self):
+        return self.breadcrumbs_items + [
+            {
+                "url": reverse(self.index_url_name),
+                "label": capfirst(self.model._meta.verbose_name_plural),
+            },
+            {"url": "", "label": self.get_page_title()},
+        ]
+
     def get_model(self):
         return get_image_model()