Submission of a multipart form does not include the file data

[FEROS01]

I have form that contains a text input and a file input. The file input makes a HTMX request 'onchange' for some pre submission processing and the form itself makes a HTMX request on submission.

<form hx-encoding="multipart/form-data" hx-post="/view_messages/9/User" hx-target=".div">
    <textarea name="text" ></textarea>
    <input type="file" name="media" multiple="" hx-post="/media_name/" hx-target=".div2" >
    <button type="submit"></button>
</form> 

Note that both the file input and form tags send requests on their default triggers 'onchange' and 'onsubmit' respectively.

Also note that I have prevented default on form submission using Javascript (prevent submission from refreshing the page).

const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
        e.preventDefault()
    }

The issue is that, when a request is made with the file input (to '/media_name/') , both the text and file data is shown in the Form data (in the network panel), but when a request is made with the form itself (to "/view_messages/9/User"), it only shows the text data.

Here is the payload when a HTMX request is made by file input

Here is the payload when a HTMX request is made by the form

[FEROS01]

The mistake was from my end, I had an 'afterswap' event listener on the file input that sets the value of the file input to an empty string. That means the input file's value will always be empty before the main form submission because the file input's HTMX request is always called first before the form's HTMX request.

document.body.addEventListener('htmx:afterSwap', function (evt) {
            const fileInputDom = document.querySelector('.send_input');
            const messageInputDom = document.querySelector('#msg_form textarea')
            messageInputDom.value = '';
            fileInputDom.value = '';