ImageChooser now sets a default title based on filename. Fix #2844 (#4385)

CHANGELOG.txt

@@ -18,6 +18,7 @@ Changelog
  * Added hook `register_account_menu_item` to add new account preference items (Michael van Tellingen)
  * Added change email functionality from the account settings (Alejandro Garza, Alexs Mathilda)
  * Add request parameter to edit handlers (Rajeev J Sebastian)
+ * ImageChooser now sets a default title based on filename (Coen van der Kamp)
  * Fix: Status button on 'edit page' now links to the correct URL when live and draft slug differ (LB (Ben Johnston))
  * Fix: Image title text in the gallery and in the chooser now wraps for long filenames (LB (Ben Johnston), Luiz Boaretto)
  * Fix: Move image editor action buttons to the bottom of the form on mobile (Julian Gallo)

CONTRIBUTORS.rst

@@ -290,6 +290,7 @@ Contributors
 * Arthur Holzner
 * Alejandro Garza
 * Rajeev J Sebastian
+* Coen van der Kamp
 
 Translators
 ===========

docs/releases/2.1.rst

@@ -32,6 +32,7 @@ Other features
  * Added hook `register_account_menu_item` to add new account preference items (Michael van Tellingen)
  * Added change email functionality from the account settings (Alejandro Garza, Alexs Mathilda)
  * Add request parameter to edit handlers (Rajeev J Sebastian)
+ * ImageChooser now sets a default title based on filename (Coen van der Kamp)
 
 Bug fixes
 ~~~~~~~~~

wagtail/images/templates/wagtailimages/chooser/chooser.js

@@ -109,6 +109,24 @@ function(modal) {
         return false;
     });
 
+    function populateTitle(context) {
+        // Note: There are two inputs with `#id_title` on the page.
+        // The page title and image title. Select the input inside the modal body.
+        var fileWidget = $('#id_file', context);
+        fileWidget.on('change', function () {
+            var titleWidget = $('#id_title', context);
+            var title = titleWidget.val();
+            if (title === '') {
+                // The file widget value example: `C:\fakepath\image.jpg`
+                var parts = fileWidget.val().split('\\');
+                var fileName = parts[parts.length - 1];
+                titleWidget.val(fileName);
+            }
+        });
+    }
+
+    populateTitle(modal.body);
+
     {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
 
     /* Add tag entry interface (with autocompletion) to the tag field of the image upload form */