Make 'no images' prompt consistent with documents, with "upload one now" prompt

client/src/entrypoints/images/image-chooser-modal.js

@@ -2,6 +2,20 @@ import $ from 'jquery';
 import { ChooserModalOnloadHandlerFactory } from '../../includes/chooserModal';
 
 class ImageChooserModalOnloadHandlerFactory extends ChooserModalOnloadHandlerFactory {
+  ajaxifyLinks(modal, context) {
+    super.ajaxifyLinks(modal, context);
+
+    $('a.upload-one-now').on('click', (event) => {
+      // Set current collection ID at upload form tab
+      const collectionId = $('#id_collection_id').val();
+      if (collectionId) {
+        $('#id_image-chooser-upload-collection').val(collectionId);
+      }
+
+      event.preventDefault();
+    });
+  }
+
   onLoadChooseStep(modal) {
     super.onLoadChooseStep(modal);
 

wagtail/images/templates/wagtailimages/chooser/results.html

@@ -17,5 +17,16 @@
 {% endblock %}
 
 {% block no_items_message %}
-    <p>{% trans "No images have been uploaded." %}</p>
+    <p>
+        {% if is_filtering_by_collection %}
+            {% trans "You haven't uploaded any images in this collection." %}
+        {% else %}
+            {% trans "You haven't uploaded any images." %}
+        {% endif %}
+        {% if can_create %}
+            {% blocktrans trimmed %}
+                Why not <a class="upload-one-now" href="#tab-upload" data-tab-trigger>upload one now</a>?
+            {% endblocktrans %}
+        {% endif %}
+    </p>
 {% endblock %}