diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index a896160874..f4e7c7e9df 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/docs/releases/6.3.md b/docs/releases/6.3.md
index 9cb99f34a4..811d643f40 100644
--- a/docs/releases/6.3.md
+++ b/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
diff --git a/wagtail/documents/static_src/wagtaildocs/js/add-multiple.js b/wagtail/documents/static_src/wagtaildocs/js/add-multiple.js
index 5a2d837aeb..fabf2550c3 100644
--- a/wagtail/documents/static_src/wagtaildocs/js/add-multiple.js
+++ b/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,
},
}),
);
diff --git a/wagtail/documents/templates/wagtaildocs/multiple/add.html b/wagtail/documents/templates/wagtaildocs/multiple/add.html
index b4fb2e1cce..2b2becfd51 100644
--- a/wagtail/documents/templates/wagtaildocs/multiple/add.html
+++ b/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 %}
diff --git a/wagtail/images/static_src/wagtailimages/js/add-multiple.js b/wagtail/images/static_src/wagtailimages/js/add-multiple.js
index e809f8c8d6..7255bf2f28 100644
--- a/wagtail/images/static_src/wagtailimages/js/add-multiple.js
+++ b/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,
},
}),
);
diff --git a/wagtail/images/templates/wagtailimages/multiple/add.html b/wagtail/images/templates/wagtailimages/multiple/add.html
index a4467d2e13..11af69c175 100644
--- a/wagtail/images/templates/wagtailimages/multiple/add.html
+++ b/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 %}