From 912c0881f9bf17adb03a8c7fe83ab36c969b0521 Mon Sep 17 00:00:00 2001 From: LB Johnston Date: Thu, 26 Sep 2024 08:23:00 +1000 Subject: [PATCH] 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 | 1 + docs/releases/6.3.md | 1 + .../static_src/wagtaildocs/js/add-multiple.js | 3 +-- .../templates/wagtaildocs/multiple/add.html | 15 ++++++------ .../wagtailimages/js/add-multiple.js | 9 +------ .../templates/wagtailimages/multiple/add.html | 24 +++++++++---------- 6 files changed, 23 insertions(+), 30 deletions(-) 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 @@
- +
{% csrf_token %} {% if collections %} @@ -73,10 +80,4 @@ - - {% 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 @@
- +
{% csrf_token %} {% if collections %} @@ -88,16 +98,4 @@ - - {% endblock %}