Fix title population from file name in media chooser / add media

+ tags init too when using the generic media chooser
torchbox · Jul 19, 2023 · ae77a20 · ae77a20
1 parent 99a2693
commit ae77a20
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/wagtailmedia/static/wagtailmedia/js/media-chooser-modal.js b/src/wagtailmedia/static/wagtailmedia/js/media-chooser-modal.js
@@ -148,27 +148,26 @@ MEDIA_CHOOSER_MODAL_ONLOAD_HANDLERS = {
             return false;
         });
 
-        function populateTitle(context) {
-            // Note: There are two inputs with `#id_title` on the page.
-            // The page title and media title. Select the input inside the modal body.
-            var fileWidget = $('#id_file', context);
+        // Note: There are two inputs with `#id_title` on the page.
+        // The page title and media title. Select the input inside the modal body.
+        $('[name="media-chooser-upload-file"]', modal.body).each(function() {
+            const fileWidget = $(this);
             fileWidget.on('change', function () {
-                var titleWidget = $('#id_title', context);
-                var title = titleWidget.val();
-                if (title === '') {
+                let titleWidget = $('#id_media-chooser-upload-title', fileWidget.closest('form'));
+                if (titleWidget.val() === '') {
                     // The file widget value example: `C:\fakepath\media.jpg`
-                    var parts = fileWidget.val().split('\\');
-                    var fileName = parts[parts.length - 1];
-                    titleWidget.val(fileName);
+                    const parts = fileWidget.val().split('\\');
+                    const filename = parts[parts.length - 1];
+                    titleWidget.val(filename.replace(/\.[^.]+$/, ''));
                 }
             });
-        }
-
-        populateTitle(modal.body);
+        });
 
         /* Add tag entry interface (with autocompletion) to the tag field of the media upload form */
-        $('#id_tags', modal.body).tagit({
-            autocomplete: {source: jsonData['tag_autocomplete_url']}
+        $('[name="media-chooser-upload-tags"]', modal.body).each(function() {
+           $(this).tagit({
+                autocomplete: {source: jsonData['tag_autocomplete_url']}
+            });
         });
     },
     'media_chosen': function(modal, jsonData) {

diff --git a/src/wagtailmedia/templates/wagtailmedia/media/add.html b/src/wagtailmedia/templates/wagtailmedia/media/add.html
@@ -20,6 +20,17 @@
             $('#id_tags').tagit({
                 autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
             });
+
+            const fileWidget = document.getElementById("id_file");
+            const titleWidget = document.getElementById("id_title");
+            fileWidget.addEventListener('change', function () {
+                if (titleWidget.value === '') {
+                    // The file widget value example: `C:\fakepath\media.jpg`
+                    var parts = fileWidget.value.split('\\');
+                    var filename = parts[parts.length - 1].replace(/\.[^.]+$/, '');
+                    titleWidget.value = filename;
+                }
+            });
         });
     </script>
 {% endblock %}

diff --git a/src/wagtailmedia/templates/wagtailmedia/media/edit.html b/src/wagtailmedia/templates/wagtailmedia/media/edit.html
@@ -4,7 +4,6 @@
 
 {% block extra_js %}
     {{ block.super }}
-
     {{ form.media.js }}
 
     {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}