JS error in AJAX framework when using a file input and data-request on a sibling field

[Fl0Cri]

Winter CMS Build

dev-develop

PHP Version

8.3

Database engine

MySQL/MariaDB

Plugins installed

None

Issue description

Encountered this issue when migrating an application from OctoberCMS 1.1.

Using the legacy AJAX framework, if an input of type file exist in a form and another field in this form calls an AJAX handler (using a data-request attribute), the following JS error appears:

Unformatted text version

Uncaught TypeError: 'slice' called on an object that does not implement interface Blob.
    jQuery 4
    Request http://winter.test/modules/system/assets/js/framework.js?v=winter:171
    request http://winter.test/modules/system/assets/js/framework.js?v=winter:505
    dataTrackInputTimer http://winter.test/modules/system/assets/js/framework.js?v=winter:684
    setTimeout handler*documentOnKeyup http://winter.test/modules/system/assets/js/framework.js?v=winter:680
    jQuery 7
    <anonymous> http://winter.test/modules/system/assets/js/framework.js?v=winter:659
    <anonymous> http://winter.test/modules/system/assets/js/framework.js?v=winter:716
[jquery.js:2:88140](http://winter.test/themes/demo/assets/vendor/jquery.js)
    jQuery 4
    Request http://winter.test/modules/system/assets/js/framework.js?v=winter:171
    request http://winter.test/modules/system/assets/js/framework.js?v=winter:505
    dataTrackInputTimer http://winter.test/modules/system/assets/js/framework.js?v=winter:684
    (Asynchrone : setTimeout handler)
    documentOnKeyup http://winter.test/modules/system/assets/js/framework.js?v=winter:680
    jQuery 7
    <anonyme> http://winter.test/modules/system/assets/js/framework.js?v=winter:659
    <anonyme> http://winter.test/modules/system/assets/js/framework.js?v=winter:716

The parent form has a data-request-files attribute, but the child field doesn't, the intent being that the file is not uploaded on every request.

This can happen for example when using wn-location-plugin and the Country+State fields.

Let me know if you would like me to dig a bit more, but I am not very familiar with the inner working of the AJAX framework.

Steps to replicate

Create the following CMS page in a theme using the legacy AJAX framework:

Demo page

title = "Form issue demo"
url = "/demo/form"
layout = "default"
==
function onSomeValueChange()
{
    return [
        '#echo' => input('someValue'),
    ];
}
==
<div class="container">
    <!-- The form has data-request-files -->
    <form data-request="onSubmit" data-request-files>
        <input type="file" name="someFile">

        <!-- The field causing trouble -->
        <input type="text" name="someValue" data-request="onSomeValueChange" data-track-input=100>

        <div id="echo"></div>

        <button type="submit">Submit</button>
    </form>
</div>

Then, access the page, open the browser dev tools and try to put a value in the text field. The error appears and no AJAX request is made.

Workaround

Adding data-request-files to the field allows to avoid the problematic code path, but it causes the file to be uploaded on every request (not just the form submit).

Snowboard does not seem to be impacted as far as I could test.