wagtail 7.0.2__py3-none-any.whl → 7.1rc1__py3-none-any.whl

wagtail/images/templates/wagtailimages/images/edit.html

@@ -29,7 +29,8 @@
 
             <div
                 class="focal-point-chooser"
-                style="max-width: {{ rendition.width|unlocalize }}px; max-height: {{ rendition.height|unlocalize }}px;"
+                data-max-width="{{ rendition.width|unlocalize }}px"
+                data-max-height="{{ rendition.height|unlocalize }}px"
                 data-focal-point-x="{{ image.focal_point_x|default_if_none:''|unlocalize }}"
                 data-focal-point-y="{{ image.focal_point_y|default_if_none:''|unlocalize }}"
                 data-focal-point-width="{{ image.focal_point_width|default_if_none:''|unlocalize }}"

wagtail/images/templates/wagtailimages/images/image_preview_column_cell.html

@@ -0,0 +1,10 @@
+{% load wagtailadmin_tags %}
+{% load wagtailimages_tags %}
+
+<td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
+    <a class="image-choice--list" href="{% url 'wagtailimages:edit' instance.id %}{% if next %}?next={{ next|urlencode }}{% endif %}">
+        <div class="image">
+            {% image instance max-165x165 class="show-transparency" %}
+        </div>
+    </a>
+</td>

wagtail/images/templates/wagtailimages/images/index.html

@@ -8,6 +8,9 @@
 
 {% block slim_header %}
     {% fragment as extra_form_fields %}
+        <div id="layout-toggle-button">
+            {% include "wagtailimages/images/layout_toggle_button.html" %}
+        </div>
         {% rawformattedfield label_text=_("Sort by") id_for_label="order_images_by" sr_only_label=True %}
             <select id="order_images_by" name="ordering">
                 {% for ordering, ordering_text in ORDERING_OPTIONS.items %}

wagtail/images/templates/wagtailimages/images/index_results.html

@@ -2,25 +2,36 @@
 {% load wagtailimages_tags wagtailadmin_tags %}
 {% load i18n l10n %}
 
+{% block before_results %}
+    {{ block.super }}
+    <template data-controller="w-teleport" data-w-teleport-target-value="#layout-toggle-button" data-w-teleport-reset-value="true">
+        {% include "wagtailimages/images/layout_toggle_button.html" %}
+    </template>
+{% endblock %}
+
 {% block results %}
-    <div class="nice-padding">
-        <ul class="listing horiz images">
-            {% for image in object_list %}
-                <li>
-                    {% fragment as title_id %}image_{{ image.pk|unlocalize|admin_urlquote }}_title{% endfragment %}
-                    {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="image" instance=image aria_describedby=title_id only %}
-                    <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url view.edit_url_name image.id %}{% if next %}?next={{ next|urlencode }}{% endif %}">
-                        <figure>
-                            {% include "wagtailimages/images/results_image.html" %}
-                            <figcaption id="{{ title_id }}">
-                                {{ image.title|ellipsistrim:60 }}
-                            </figcaption>
-                        </figure>
-                    </a>
-                </li>
-            {% endfor %}
-        </ul>
-    </div>
+    {% if layout == "list" %}
+        {{ block.super }}
+    {% else %}
+        <div class="nice-padding">
+            <ul class="listing horiz images">
+                {% for image in object_list %}
+                    <li>
+                        {% fragment as title_id %}image_{{ image.pk|unlocalize|admin_urlquote }}_title{% endfragment %}
+                        {% include "wagtailadmin/bulk_actions/listing_checkbox_cell.html" with obj_type="image" instance=image aria_describedby=title_id only %}
+                        <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url view.edit_url_name image.id %}{% if next %}?next={{ next|urlencode }}{% endif %}">
+                            <figure>
+                                {% include "wagtailimages/images/results_image.html" %}
+                                <figcaption id="{{ title_id }}">
+                                    {{ image.title|ellipsistrim:60 }}
+                                </figcaption>
+                            </figure>
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% endif %}
 {% endblock %}
 
 {% block no_results_message %}

wagtail/images/templates/wagtailimages/images/layout_toggle_button.html

@@ -0,0 +1,10 @@
+{% load wagtailadmin_tags i18n %}
+
+<label class="w-slim-header-action-button w-layout-toggle-button">
+    {% if layout == "list" %}
+        {% icon name="grid" %}
+    {% else %}
+        {% icon name="list-ul" %}
+    {% endif %}
+    <input type="checkbox" aria-label="{% translate 'Toggle layout' %}" name="layout" value="list" {% if layout == "list" %}checked{% endif %} data-controller="w-tooltip" data-w-tooltip-content-value="{% translate 'Toggle layout' %}">
+</label>

wagtail/images/templates/wagtailimages/images/title_column_cell.html

@@ -0,0 +1,11 @@
+{% extends "wagtailadmin/tables/title_cell.html" %}
+{% load wagtailadmin_tags %}
+
+{% block title %}
+    {{ block.super }}
+{% endblock %}
+{% block extra %}
+    <div class="filename-wrapper">
+        <span>{{ instance.filename }}</span>
+    </div>
+{% endblock %}

wagtail/images/templates/wagtailimages/images/url_generator.html

@@ -1,13 +1,6 @@
 {% extends "wagtailadmin/generic/base.html" %}
 {% load wagtailimages_tags wagtailadmin_tags i18n %}
 
-{% block extra_css %}
-    <style>
-        .loading-mask {
-            max-height: clamp(25rem, 50vh, 50rem);
-        }
-    </style>
-{% endblock %}
 
 {% block main_content %}
     <div class="w-image-url-generator w-mt-8" data-generator-url="{% url 'wagtailimages:generate_url' object.id '__filterspec__' %}">
@@ -23,7 +16,7 @@
         {% trans "Preview" as heading %}
         {% panel id="preview" icon="view" heading=heading %}
             <div class="w-image-url-generator__preview">
-                <div class="loading-mask w-block w-border-2 w-border-border-furniture w-overflow-scroll w-p-4 w-rounded-sm">
+                <div class="loading-mask w-block w-border-2 w-border-border-furniture w-overflow-scroll w-p-4 w-rounded-sm w-max-h-[clamp(25rem,50vh,50rem)]">
                     <img class="preview w-max-w-none" src="" alt="{% trans 'Preview' %}" />
                 </div>
             </div>

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

@@ -26,6 +26,7 @@
                 <input
                     id="fileupload"
                     multiple
+                    accept="{{accept_attributes}}"
                     name="files[]"
                     type="file"
                     data-accept-file-types="/\.({{ allowed_extensions|join:'|' }})$/i"
@@ -52,7 +53,7 @@
     </div>
 
     <div id="overall-progress" class="progress progress-secondary">
-        <div class="bar" style="width: 0%;">0%</div>
+        <div class="bar w-w-0">0%</div>
     </div>
 
     <ul id="upload-list" class="upload-list multiple"></ul>
@@ -65,7 +66,7 @@
                         {% icon name="image" %}
                     </div>
                     <div class="progress">
-                        <div class="bar" style="width: 0%;"></div>
+                        <div class="bar w-w-0"></div>
                     </div>
                 </div>
             </div>

wagtail/images/templatetags/wagtailimages_tags.py

@@ -7,7 +7,6 @@ from wagtail.images.shortcuts import (
     get_rendition_or_not_found,
     get_renditions_or_not_found,
 )
-from wagtail.images.utils import to_svg_safe_spec
 from wagtail.images.views.serve import generate_image_url
 
 register = template.Library()
@@ -30,7 +29,6 @@ def image(parser, token):
     error_messages = []
 
     multi_rendition = tag_name != "image"
-    preserve_svg = False
 
     for bit in bits:
         if bit == "as":
@@ -42,8 +40,6 @@ def image(parser, token):
             else:
                 # more than one item exists after 'as' - reject as invalid
                 error_messages.append("More than one variable name after 'as'")
-        elif bit == "preserve-svg":
-            preserve_svg = True
         else:
             try:
                 name, value = bit.split("=")
@@ -87,7 +83,6 @@ def image(parser, token):
             filter_specs,
             attrs=attrs,
             output_var_name=output_var_name,
-            preserve_svg=preserve_svg,
         )
     else:
         errors = "; ".join(error_messages)
@@ -110,17 +105,13 @@ class ImageNode(template.Node):
         filter_specs,
         output_var_name=None,
         attrs={},
-        preserve_svg=False,
     ):
         self.image_expr = image_expr
         self.output_var_name = output_var_name
         self.attrs = attrs
         self.filter_specs = filter_specs
-        self.preserve_svg = preserve_svg
 
-    def get_filter(self, preserve_svg=False):
-        if preserve_svg:
-            return Filter(to_svg_safe_spec(self.filter_specs))
+    def get_filter(self):
         return Filter(spec="|".join(self.filter_specs))
 
     def validate_image(self, context):
@@ -149,7 +140,7 @@ class ImageNode(template.Node):
 
         rendition = get_rendition_or_not_found(
             image,
-            self.get_filter(preserve_svg=self.preserve_svg and image.is_svg()),
+            self.get_filter(),
         )
 
         if self.output_var_name:
@@ -165,10 +156,8 @@ class ImageNode(template.Node):
 
 
 class SrcsetImageNode(ImageNode):
-    def get_filters(self, preserve_svg=False):
+    def get_filters(self):
         filter_specs = Filter.expand_spec(self.filter_specs)
-        if preserve_svg:
-            return [Filter(to_svg_safe_spec(f)) for f in filter_specs]
         return [Filter(spec=f) for f in filter_specs]
 
     def render(self, context):
@@ -177,7 +166,7 @@ class SrcsetImageNode(ImageNode):
         if not image:
             return ""
 
-        specs = self.get_filters(preserve_svg=self.preserve_svg and image.is_svg())
+        specs = self.get_filters()
         renditions = get_renditions_or_not_found(image, specs)
 
         if self.output_var_name:
@@ -202,7 +191,7 @@ class PictureNode(SrcsetImageNode):
 
         renditions = get_renditions_or_not_found(
             image,
-            self.get_filters(preserve_svg=self.preserve_svg and image.is_svg()),
+            self.get_filters(),
         )
 
         if self.output_var_name:

wagtail/images/tests/test_admin_views.py

@@ -21,9 +21,10 @@ from willow.optimizers.base import OptimizerBase
 from willow.registry import registry
 
 from wagtail.admin.admin_url_finder import AdminURLFinder
+from wagtail.admin.ui.tables import Table
 from wagtail.images import get_image_model
 from wagtail.images.utils import generate_signature
-from wagtail.images.views.images import ImagesFilterSet
+from wagtail.images.views.images import BulkActionsColumn, ImagesFilterSet
 from wagtail.models import (
     Collection,
     GroupCollectionPermission,
@@ -132,6 +133,8 @@ class TestImageIndexView(WagtailTestUtils, TestCase):
             "-created_at",
             "file_size",
             "-file_size",
+            "usage_count",
+            "-usage_count",
         ]
         for ordering in orderings:
             response = self.get({"ordering": ordering})
@@ -398,6 +401,247 @@ class TestImageIndexView(WagtailTestUtils, TestCase):
         ]
         self.assertEqual(len(in_clauses), 0)
 
+    def test_correct_layout_is_passed_to_context(self):
+        response = self.client.get(reverse("wagtailimages:index"))
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.context["layout"], "grid")
+
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.context["layout"], "list")
+
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "grid"})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.context["layout"], "grid")
+
+    def test_layout_when_layout_is_list(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNotNone(
+            table, "Expected a table element to be present in list layout."
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNone(
+            grid_ul,
+            "Expected no ul element with class 'listing horiz images' in list layout.",
+        )
+
+    def test_layout_when_layout_is_grid(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "grid"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNone(
+            table, "Expected no table element with class 'listing' in grid layout."
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNotNone(
+            grid_ul,
+            "Expected a ul element with class 'listing horiz images' in grid layout.",
+        )
+
+    def test_layout_when_no_layout_is_passed(self):
+        response = self.client.get(reverse("wagtailimages:index"))
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNone(
+            table,
+            "If no layout is passed, it should default to grid layout (no table) - table found",
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNotNone(
+            grid_ul,
+            "If no layout is passed, it should default to grid layout (ul not found)",
+        )
+
+    def test_layout_when_layout_is_invalid(self):
+        response = self.client.get(
+            reverse("wagtailimages:index"), {"layout": "invalid"}
+        )
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNone(
+            table,
+            "If invalid layout is passed, it should default to grid layout (no table) - table found",
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNotNone(
+            grid_ul,
+            "If invalid layout is passed, it should default to grid layout (ul not found)",
+        )
+
+    def test_image_is_present_in_image_preview_column(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        image_preview_wrapper = soup.find("td", class_="image-preview")
+        self.assertIsNotNone(
+            image_preview_wrapper,
+            "Expected a <td> with class image-preview' inside the listing table",
+        )
+
+        preview_image = image_preview_wrapper.find("img")
+        self.assertIsNotNone(
+            preview_image, "Expected an <img> element inside image-preview <td>"
+        )
+
+    def test_title_and_filename_are_present_in_title_column(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        title_and_filename_wrapper = soup.select_one("td.title.title-with-filename")
+        self.assertIsNotNone(
+            title_and_filename_wrapper,
+            "Expected a <td> with class 'title and title-with-filename' inside the listing table.",
+        )
+
+        title_wrapper_div = title_and_filename_wrapper.find(
+            "div", class_="title-wrapper"
+        )
+        self.assertIsNotNone(
+            title_wrapper_div,
+            "Expected a <div> with class 'title-wrapper' inside the title-with-filename <td>",
+        )
+
+        filename_wrapper_div = title_and_filename_wrapper.find(
+            "div", class_="filename-wrapper"
+        )
+        self.assertIsNotNone(
+            filename_wrapper_div,
+            "Expected a <div> with class 'filename-wrapper' inside the title-with-filename <td>",
+        )
+
+    def test_list_layout_contains_required_table_headers(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        headers = soup.find_all("th")
+        header_texts = [th.get_text(strip=True) for th in headers]
+
+        expected_headers = ["Preview", "Title", "Collection", "Created"]
+        for expected_header in expected_headers:
+            self.assertIn(
+                expected_header,
+                header_texts,
+                f"Expected header '{expected_header}' not found in list layout",
+            )
+
+    def test_layout_toggle_button_in_list_layout(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        layout_toggle_button = soup.find("label", class_="w-layout-toggle-button")
+        self.assertIsNotNone(
+            layout_toggle_button, "Expected layout toggle button in list layout"
+        )
+
+    def test_layout_toggle_button_in_grid_layout(self):
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "grid"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        layout_toggle_button = soup.find("label", class_="w-layout-toggle-button")
+        self.assertIsNotNone(
+            layout_toggle_button, "Expected layout toggle button in grid layout"
+        )
+
+    def test_usage_count_column(self):
+        with self.captureOnCommitCallbacks(execute=True):
+            VariousOnDeleteModel.objects.create(protected_image=self.kitten_image)
+
+        response = self.client.get(reverse("wagtailimages:index"), {"layout": "list"})
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        expected_url = reverse(
+            "wagtailimages:image_usage",
+            args=(self.kitten_image.pk,),
+        )
+        link = soup.select_one(f"a[href='{expected_url}']")
+        self.assertIsNotNone(link)
+        self.assertEqual(link.text.strip(), "Used 1 time")
+
+        expected_url = reverse(
+            "wagtailimages:image_usage",
+            args=(self.puppy_image.pk,),
+        )
+        link = soup.select_one(f"a[href='{expected_url}']")
+        self.assertIsNotNone(link)
+        self.assertEqual(link.text.strip(), "Used 0 times")
+
+    def test_order_by_usage_count(self):
+        with self.captureOnCommitCallbacks(execute=True):
+            VariousOnDeleteModel.objects.create(protected_image=self.kitten_image)
+            VariousOnDeleteModel.objects.create(protected_image=self.kitten_image)
+            VariousOnDeleteModel.objects.create(protected_image=self.puppy_image)
+
+        cases = {
+            "usage_count": [self.puppy_image, self.kitten_image],
+            "-usage_count": [self.kitten_image, self.puppy_image],
+        }
+        for layout in ["list", "grid"]:
+            for ordering, expected_order in cases.items():
+                with self.subTest(layout=layout, ordering=ordering):
+                    response = self.client.get(
+                        reverse("wagtailimages:index"),
+                        {"ordering": ordering, "layout": layout},
+                    )
+                    self.assertEqual(response.status_code, 200)
+                    context = response.context
+                    self.assertSequenceEqual(
+                        context["page_obj"].object_list,
+                        expected_order,
+                    )
+
+
+class TestBulkActionsColumn(WagtailTestUtils, TestCase):
+    def setUp(self):
+        self.user = self.login()
+        self.root_collection = Collection.get_first_root_node()
+        self.test_collection = self.root_collection.add_child(name="Test Collection")
+
+    def test_get_header_context_data_with_current_collection(self):
+        column = BulkActionsColumn("bulk_actions")
+        table = Table(columns=[column], data=[])
+
+        parent_context = {
+            "table": table,
+            "current_collection": self.test_collection,
+        }
+
+        context = column.get_header_context_data(parent_context)
+
+        self.assertEqual(context["parent"], self.test_collection.id)
+
+    def test_get_header_context_data_without_current_collection(self):
+        column = BulkActionsColumn("bulk_actions")
+        table = Table(columns=[column], data=[])
+
+        parent_context = {
+            "table": table,
+            "current_collection": None,
+        }
+
+        context = column.get_header_context_data(parent_context)
+
+        self.assertNotIn("parent", context)
+
 
 class TestImageIndexViewSearch(WagtailTestUtils, TransactionTestCase):
     fixtures = ["test_empty.json"]
@@ -514,6 +758,44 @@ class TestImageIndexViewSearch(WagtailTestUtils, TransactionTestCase):
         response = self.get({"tag": "one", "q": "test"})
         self.assertEqual(response.context["page_obj"].paginator.count, 2)
 
+    def test_image_search_when_layout_is_list(self):
+        response = self.client.get(
+            reverse("wagtailimages:index"), {"q": "A", "layout": "list"}
+        )
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNotNone(
+            table,
+            "Expected a table element to be present in list layout when searching for images.",
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNone(
+            grid_ul,
+            "Expected no ul element with class 'listing horiz images' in list layout when searching for images.",
+        )
+
+    def test_image_search_when_layout_is_grid(self):
+        response = self.client.get(
+            reverse("wagtailimages:index"), {"q": "A", "layout": "grid"}
+        )
+        self.assertEqual(response.status_code, 200)
+        soup = self.get_soup(response.content)
+
+        table = soup.find("table", class_="listing")
+        self.assertIsNone(
+            table,
+            "Expected no table element with class 'listing' in grid layout when searching for images.",
+        )
+
+        grid_ul = soup.find("ul", class_="listing horiz images")
+        self.assertIsNotNone(
+            grid_ul,
+            "Expected a ul element with class 'listing horiz images' in grid layout when searching for images.",
+        )
+
 
 class TestImageListingResultsView(WagtailTestUtils, TransactionTestCase):
     fixtures = ["test_empty.json"]
@@ -1626,9 +1908,11 @@ class TestImageChooserView(WagtailTestUtils, TestCase):
         # draftail should NOT be a standard JS include on this page
         self.assertNotIn("wagtailadmin/js/draftail.js", response_json["html"])
 
-        # upload file field should have accept="image/*"
+        # upload file field should have an explicit 'accept' case for image/avif
         soup = self.get_soup(response_json["html"])
-        self.assertEqual(soup.select_one('input[type="file"]').get("accept"), "image/*")
+        self.assertEqual(
+            soup.select_one('input[type="file"]').get("accept"), "image/*, image/avif"
+        )
 
     def test_simple_with_collection_nesting(self):
         root_collection = Collection.get_first_root_node()
@@ -1649,12 +1933,24 @@ class TestImageChooserView(WagtailTestUtils, TestCase):
         self.assertEqual(response_json["step"], "choose")
         self.assertTemplateUsed(response, "wagtailimages/chooser/chooser.html")
 
-        # upload file field should have an explicit 'accept' case for image/heic
+        # upload file field should have an explicit 'accept' case for image/heic and image/avif
         soup = self.get_soup(response_json["html"])
         self.assertEqual(
-            soup.select_one('input[type="file"]').get("accept"), "image/*, image/heic"
+            soup.select_one('input[type="file"]').get("accept"),
+            "image/*, image/heic, image/avif",
         )
 
+    @override_settings(WAGTAILIMAGES_EXTENSIONS=["gif", "jpg", "jpeg", "png", "webp"])
+    def test_upload_field_without_avif(self):
+        response = self.get()
+        self.assertEqual(response.status_code, 200)
+        response_json = json.loads(response.content.decode())
+        self.assertEqual(response_json["step"], "choose")
+        self.assertTemplateUsed(response, "wagtailimages/chooser/chooser.html")
+
+        soup = self.get_soup(response_json["html"])
+        self.assertEqual(soup.select_one('input[type="file"]').get("accept"), "image/*")
+
     def test_choose_permissions(self):
         # Create group with access to admin and Chooser permission on one Collection, but not another.
         bakers_group = Group.objects.create(name="Bakers")
@@ -2447,6 +2743,14 @@ class TestMultipleImageUploader(AdminTemplateTestUtils, WagtailTestUtils, TestCa
         self.assertEqual(response.status_code, 200)
         self.assertTemplateUsed(response, "wagtailimages/multiple/add.html")
 
+        # multiple upload file field should have 'accept' attr with an explicit
+        # case for image/avif
+        soup = self.get_soup(response.content)
+        self.assertEqual(
+            soup.select_one("input[type='file'][multiple]").get("accept"),
+            "image/*, image/avif",
+        )
+
         # draftail should NOT be a standard JS include on this page
         # (see TestMultipleImageUploaderWithCustomImageModel - this confirms that form media
         # definitions are being respected)
@@ -2463,6 +2767,32 @@ class TestMultipleImageUploader(AdminTemplateTestUtils, WagtailTestUtils, TestCa
             response.content,
         )
 
+    @override_settings(
+        WAGTAILIMAGES_EXTENSIONS=["gif", "jpg", "jpeg", "png", "webp", "avif", "heic"]
+    )
+    def test_multiple_upload_field_accepts_heic(self):
+        response = self.client.get(reverse("wagtailimages:add_multiple"))
+
+        self.assertEqual(response.status_code, 200)
+
+        # multiple upload file field should have explicit 'accept' case for image/heic and image/avif
+        soup = self.get_soup(response.content)
+        self.assertEqual(
+            soup.select_one("input[type='file'][multiple]").get("accept"),
+            "image/*, image/heic, image/avif",
+        )
+
+    @override_settings(WAGTAILIMAGES_EXTENSIONS=["gif", "jpg", "jpeg", "png", "webp"])
+    def test_multiple_upload_field_without_avif(self):
+        response = self.client.get(reverse("wagtailimages:add_multiple"))
+
+        self.assertEqual(response.status_code, 200)
+
+        soup = self.get_soup(response.content)
+        self.assertEqual(
+            soup.select_one("input[type='file'][multiple]").get("accept"), "image/*"
+        )
+
     @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/tests/test_blocks.py

@@ -5,10 +5,10 @@ from django.test import TestCase
 from django.utils.safestring import SafeString
 
 from wagtail.admin import compare
+from wagtail.admin.telepath import JSContext
 from wagtail.blocks.stream_block import StreamValue
 from wagtail.blocks.struct_block import StructBlockValidationError
 from wagtail.images.blocks import ImageBlock, ImageChooserBlock
-from wagtail.telepath import JSContext
 from wagtail.test.testapp.models import StreamPage
 from wagtail.test.utils.wagtail_tests import WagtailTestUtils