Use FormData for docs/images add-multiple's edit handling

The ajax-request now uses multipart/form-data, similar to
image-chooser-modal.js/document-chooser-modal.js, which allows to add
and use FileFields in the bulk-upload-views.

CHANGELOG.txt

@@ -11,6 +11,7 @@ Changelog
  * Fix issue where `ModelAdmin` index listings with export list enabled would show buttons with an incorrect layout (Josh Woodcock)
  * Use `InlinePanel`'s label when available for field comparison label (Sandil Ranasinghe)
  * Drop support for Safari 13 by removing left/right positioning in favour of CSS logical properties (Thibaud Colas)
+ * Use `FormData` instead of jQuery's `form.serialize` when editing documents or images just added so that additional fields can be better supported (Stefan Hammer)
  * Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
  * Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
 

docs/releases/4.0.md

@@ -16,6 +16,7 @@ depth: 1
  * Add `base_url_path` to `ModelAdmin` so that the default URL structure of app_label/model_name can be overridden (Vu Pham, Khanh Hoang)
  * Add `full_url` to the API output of `ImageRenditionField` (Paarth Agarwal)
  * Use `InlinePanel`'s label when available for field comparison label (Sandil Ranasinghe)
+ * Use `FormData` instead of jQuery's `form.serialize` when editing documents or images just added so that additional fields can be better supported (Stefan Hammer)
  * Drop support for Safari 13 by removing left/right positioning in favour of CSS logical properties (Thibaud Colas)
 
 ### Bug fixes

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

@@ -144,14 +144,24 @@ $(function () {
     },
   });
 
-  // ajax-enhance forms added on done()
+  /**
+   * ajax-enhance forms added on done()
+   * allows the user to modify the title, collection, tags and delete after upload
+   */
   $('#upload-list').on('submit', 'form', function (e) {
     var form = $(this);
+    var formData = new FormData(this);
     var itemElement = form.closest('#upload-list > li');
 
     e.preventDefault();
 
-    $.post(this.action, form.serialize(), function (data) {
+    $.ajax({
+      contentType: false,
+      data: formData,
+      processData: false,
+      type: 'POST',
+      url: this.action,
+    }).done(function (data) {
       if (data.success) {
         var statusText = $('.status-msg.update-success').text();
         addMessage('success', statusText);

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

@@ -185,14 +185,24 @@ $(function () {
     },
   });
 
-  // ajax-enhance forms added on done()
+  /**
+   * ajax-enhance forms added on done()
+   * allows the user to modify the title, collection, tags and delete after upload
+   */
   $('#upload-list').on('submit', 'form', function (e) {
     var form = $(this);
+    var formData = new FormData(this);
     var itemElement = form.closest('#upload-list > li');
 
     e.preventDefault();
 
-    $.post(this.action, form.serialize(), function (data) {
+    $.ajax({
+      contentType: false,
+      data: formData,
+      processData: false,
+      type: 'POST',
+      url: this.action,
+    }).done(function (data) {
       if (data.success) {
         var statusText = $('.status-msg.update-success').text();
         addMessage('success', statusText);