Remove window.fileupload_opts global usage, use data attributes instead

jQuery data is used by the jQuery file upload widget and will automatically parse data attributes as objects/or JS primitive values - see https://api.jquery.com/data/

jquery File Upload will automatically parse the data attributes and treat as the default options for initialisation (already used for the url) - see https://github.com/blueimp/jQuery-File-Upload/wiki/API#data-attributes

- Closes #9771 - avoiding globals for UI specific configs
- Relates to #1288 - ongoing work for CSP compliance

CHANGELOG.txt

@@ -58,6 +58,7 @@ Changelog
  * Maintenance: Deprecate the `{% locales %}` and `{% js_translation_strings %}` template tags (LB (Ben) Johnston, Sage Abdullah)
  * Maintenance: Ensure multi-line comments are cleaned from custom icons in addition to just single line comments (Jake Howard)
  * Maintenance: Deprecate `window.wagtailConfig.BULK_ACTION_ITEM_TYPE` usage in JavaScript to reduce reliance on inline scripts (LB (Ben) Johnston)
+ * Maintenance: Remove `window.fileupload_opts` usage in JavaScript, use data attributes on fields instead to reduce reliance on inline scripts (LB (Ben) Johnston)
 
 
 6.2.2 (24.09.2024)

docs/releases/6.3.md

@@ -84,6 +84,7 @@ This release adds formal support for Django 5.1.
  * Adopt the modern best practice for `beforeunload` usage in `UnsavedController` to trigger a leave page warning when edits have been made (Shubham Mukati, Sage Abdullah)
  * Ensure multi-line comments are cleaned from custom icons in addition to just single line comments (Jake Howard)
  * Deprecate `window.wagtailConfig.BULK_ACTION_ITEM_TYPE` usage in JavaScript to reduce reliance on inline scripts (LB (Ben) Johnston)
+ * Remove `window.fileupload_opts` usage in JavaScript, use data attributes on fields instead to reduce reliance on inline scripts (LB (Ben) Johnston)
 
 
 ## Upgrade considerations - changes affecting all projects

wagtail/documents/static_src/wagtaildocs/js/add-multiple.js

@@ -99,7 +99,6 @@ $(function () {
     formData: function (form) {
       var filename = this.files[0].name;
       var data = { title: filename.replace(/\.[^.]+$/, '') };
-      var maxTitleLength = window.fileupload_opts.max_title_length;
 
       var event = form.get(0).dispatchEvent(
         new CustomEvent('wagtail:documents-upload', {
@@ -108,7 +107,7 @@ $(function () {
           detail: {
             data: data,
             filename: filename,
-            maxTitleLength: maxTitleLength,
+            maxTitleLength: this.maxTitleLength,
           },
         }),
       );

wagtail/documents/templates/wagtaildocs/multiple/add.html

@@ -17,7 +17,14 @@
         <form action="{% url 'wagtaildocs:add_multiple' %}" method="POST" enctype="multipart/form-data">
             <div class="replace-file-input">
                 <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
-                <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtaildocs:add_multiple' %}" multiple>
+                <input
+                    id="fileupload"
+                    multiple
+                    name="files[]"
+                    type="file"
+                    data-max-title-length="{{ max_title_length|stringformat:'s'|default:'null' }}"
+                    data-url="{% url 'wagtaildocs:add_multiple' %}"
+                >
             </div>
             {% csrf_token %}
             {% if collections %}
@@ -73,10 +80,4 @@
 
     <!-- Main script -->
     <script src="{% versioned_static 'wagtaildocs/js/add-multiple.js' %}"></script>
-
-    <script>
-        window.fileupload_opts = {
-            max_title_length: {{ max_title_length|stringformat:"s"|default:"null" }}, //numeric format
-        }
-    </script>
 {% endblock %}

wagtail/images/static_src/wagtailimages/js/add-multiple.js

@@ -8,16 +8,10 @@ $(function () {
     dataType: 'html',
     sequentialUploads: true,
     dropZone: $('.drop-zone'),
-    acceptFileTypes: window.fileupload_opts.accepted_file_types,
-    maxFileSize: window.fileupload_opts.max_file_size,
     previewMinWidth: 150,
     previewMaxWidth: 150,
     previewMinHeight: 150,
     previewMaxHeight: 150,
-    messages: {
-      acceptFileTypes: window.fileupload_opts.errormessages.accepted_file_types,
-      maxFileSize: window.fileupload_opts.errormessages.max_file_size,
-    },
     add: function (e, data) {
       var $this = $(this);
       var that = $this.data('blueimp-fileupload') || $this.data('fileupload');
@@ -121,7 +115,6 @@ $(function () {
     formData: function (form) {
       var filename = this.files[0].name;
       var data = { title: filename.replace(/\.[^.]+$/, '') };
-      var maxTitleLength = window.fileupload_opts.max_title_length;
 
       var event = form.get(0).dispatchEvent(
         new CustomEvent('wagtail:images-upload', {
@@ -130,7 +123,7 @@ $(function () {
           detail: {
             data: data,
             filename: filename,
-            maxTitleLength: maxTitleLength,
+            maxTitleLength: this.maxTitleLength,
           },
         }),
       );

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

@@ -17,7 +17,17 @@
         <form action="{% url 'wagtailimages:add_multiple' %}" method="POST" enctype="multipart/form-data">
             <div class="replace-file-input">
                 <button class="button bicolor button--icon">{% icon name="plus" wrapped=1 %}{% trans "Or choose from your computer" %}</button>
-                <input id="fileupload" type="file" name="files[]" data-url="{% url 'wagtailimages:add_multiple' %}" multiple>
+                <input
+                    id="fileupload"
+                    multiple
+                    name="files[]"
+                    type="file"
+                    data-accept-file-types="/\.({{ allowed_extensions|join:'|' }})$/i"
+                    data-max-file-size="{{ max_filesize|stringformat:'s'|default:'null' }}"
+                    data-max-title-length="{{ max_title_length|stringformat:'s'|default:'null' }}"
+                    data-messages='{"maxFileSize": "{{ error_max_file_size|escapejs }}", "acceptFileTypes": "{{ error_accepted_file_types|escapejs }}"}'
+                    data-url="{% url 'wagtailimages:add_multiple' %}"
+                >
             </div>
             {% csrf_token %}
             {% if collections %}
@@ -88,16 +98,4 @@
 
     <!-- Main script -->
     <script src="{% versioned_static 'wagtailimages/js/add-multiple.js' %}"></script>
-
-    <script>
-        window.fileupload_opts = {
-            accepted_file_types: /\.({{ allowed_extensions|join:"|" }})$/i, //must be regex
-            max_file_size: {{ max_filesize|stringformat:"s"|default:"null" }}, //numeric format
-            max_title_length: {{ max_title_length|stringformat:"s"|default:"null" }}, //numeric format
-            errormessages: {
-                max_file_size: "{{ error_max_file_size|escapejs }}",
-                accepted_file_types: "{{ error_accepted_file_types|escapejs }}"
-            }
-        }
-    </script>
 {% endblock %}