Refactor images single upload view to use generic CreateView

wagtail/images/admin_urls.py

@@ -19,7 +19,7 @@ urlpatterns = [
         name="generate_url",
     ),
     path("<int:image_id>/preview/<str:filter_spec>/", images.preview, name="preview"),
-    path("add/", images.add, name="add"),
+    path("add/", images.CreateView.as_view(), name="add"),
     path("usage/<int:image_id>/", images.UsageView.as_view(), name="image_usage"),
     path("multiple/add/", multiple.AddView.as_view(), name="add_multiple"),
     path("multiple/<int:image_id>/", multiple.EditView.as_view(), name="edit_multiple"),

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

@@ -1,13 +1,10 @@
-{% extends "wagtailadmin/base.html" %}
-{% load wagtailimages_tags wagtailadmin_tags %}
-{% load i18n %}
+{% extends "wagtailadmin/generic/form.html" %}
+{% load wagtailimages_tags wagtailadmin_tags i18n %}
 {% block titletag %}{% trans "Add an image" %}{% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
 
-    {{ form.media.js }}
-
     <script>
         $(function() {
             $('#id_file').on(
@@ -39,30 +36,15 @@
     </script>
 {% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-    {{ form.media.css }}
-{% endblock %}
-
-{% block content %}
-    {% trans "Add image" as add_str %}
-    {% include "wagtailadmin/shared/header.html" with title=add_str icon="image" %}
-
-    <div class="nice-padding">
-        {% include "wagtailadmin/shared/non_field_errors.html" %}
-
-        <form action="{% url 'wagtailimages:add' %}" method="POST" enctype="multipart/form-data" novalidate>
-            {% csrf_token %}
-            <ul class="fields">
-                {% for field in form %}
-                    {% if field.is_hidden %}
-                        {{ field }}
-                    {% else %}
-                        <li>{% formattedfield field %}</li>
-                    {% endif %}
-                {% endfor %}
-                <li><input type="submit" value="{% trans 'Save' %}" class="button" /></li>
-            </ul>
-        </form>
-    </div>
+{% block actions %}
+    <button
+        type="submit"
+        class="button button-longrunning"
+        data-controller="w-progress"
+        data-action="w-progress#activate"
+        data-w-progress-active-value="{% trans 'Uploading…' %}"
+    >
+        {% icon name="spinner" %}
+        <em data-w-progress-target="label">{% trans 'Upload' %}</em>
+    </button>
 {% endblock %}

wagtail/images/tests/test_admin_views.py

@@ -515,7 +515,7 @@ class TestImageListingResultsView(WagtailTestUtils, TransactionTestCase):
         )
 
 
-class TestImageAddView(WagtailTestUtils, TestCase):
+class TestImageAddView(AdminTemplateTestUtils, WagtailTestUtils, TestCase):
     def setUp(self):
         self.login()
 
@@ -543,6 +543,14 @@ class TestImageAddView(WagtailTestUtils, TestCase):
         # draftail should NOT be a standard JS include on this page
         self.assertNotContains(response, "wagtailadmin/js/draftail.js")
 
+        self.assertBreadcrumbsItemsRendered(
+            [
+                {"url": reverse("wagtailimages:index"), "label": "Images"},
+                {"url": "", "label": "New: Image"},
+            ],
+            response.content,
+        )
+
     def test_get_with_collections(self):
         root_collection = Collection.get_first_root_node()
         root_collection.add_child(name="Evil plans")

wagtail/images/views/images.py

@@ -337,39 +337,33 @@ class DeleteView(generic.DeleteView):
         }
 
 
-@permission_checker.require("add")
-def add(request):
-    ImageModel = get_image_model()
-    ImageForm = get_image_form(ImageModel)
+class CreateView(generic.CreateView):
+    permission_policy = permission_policy
+    index_url_name = "wagtailimages:index"
+    add_url_name = "wagtailimages:add"
+    edit_url_name = "wagtailimages:edit"
+    error_message = gettext_lazy("The image could not be created due to errors.")
+    template_name = "wagtailimages/images/add.html"
+    header_icon = "image"
+    _show_breadcrumbs = True
 
-    if request.method == "POST":
-        image = ImageModel(uploaded_by_user=request.user)
-        form = ImageForm(request.POST, request.FILES, instance=image, user=request.user)
-        if form.is_valid():
-            form.save()
+    @cached_property
+    def model(self):
+        return get_image_model()
 
-            messages.success(
-                request,
-                _("Image '%(image_title)s' added.") % {"image_title": image.title},
-                buttons=[
-                    messages.button(
-                        reverse("wagtailimages:edit", args=(image.id,)), _("Edit")
-                    )
-                ],
-            )
-            return redirect("wagtailimages:index")
-        else:
-            messages.error(request, _("The image could not be created due to errors."))
-    else:
-        form = ImageForm(user=request.user)
+    def get_form_class(self):
+        return get_image_form(self.model)
 
-    return TemplateResponse(
-        request,
-        "wagtailimages/images/add.html",
-        {
-            "form": form,
-        },
-    )
+    def get_form_kwargs(self):
+        kwargs = super().get_form_kwargs()
+        kwargs["user"] = self.request.user
+        return kwargs
+
+    def get_initial_form_instance(self):
+        return self.model(uploaded_by_user=self.request.user)
+
+    def get_success_message(self, instance):
+        return _("Image '%(image_title)s' added.") % {"image_title": instance.title}
 
 
 class UsageView(generic.UsageView):