[2.0.0-alpha2] Form submission issue with multipart/form-data.

[heikkilamarko]

I have the following form in my app, which includes text and file inputs:

<form
	id="task-new-form"
	enctype="multipart/form-data"
	autocomplete="off"
	hx-post="/ui/tasks"
	hx-target="#tasks-table"
	hx-swap="innerHTML"
>...</form>

This code worked flawlessly with htmx version 2.0.0-alpha1. However, after updating to htmx version 2.0.0-alpha2, the form submission stopped working. I suspect this issue is related to changes in how multipart/form-data is handled in htmx:

[heikkilamarko]

Also reproducible in [2.0.0-beta2].

[Telroshan]

Hey, is the request not sent at all, or is it that it doesn't contain the expected payload (in which case, could you provide a screenshot of the generated payload) ? Do you have any error in console or does it fail silently ?

[heikkilamarko]

Screenshot for <script src="https://unpkg.com/htmx.org@1.9.11"></script>

Screenshot for <script src="https://unpkg.com/htmx.org@2.0.0-beta2/dist/htmx.min.js"></script>

[Telroshan]

Thanks, could you also show us the full content of the Headers tab, to be able to fully compare those 2 requests ?

[heikkilamarko]

Headers for <script src="https://unpkg.com/htmx.org@1.9.11"></script>

Headers for <script src="https://unpkg.com/htmx.org@2.0.0-beta2/dist/htmx.min.js"></script>

[Telroshan]

Hey (for some reason I forgot to follow up here), could you try again with the latest beta version and let us know if the issue persists?

[heikkilamarko]

I tried the latest beta. Everything works okay now. Thanks.

[awall]

Hi, can we re-open? This bug, or a very similar one, still exists in version 2.0.0. My app works properly again when I revert to 2.0.0-alpha1.

I am trying to submit the contents of a PNG file via POST request using hx-vals. My code looks like this:

<form
    id="plan-approval-dialog-form"
    hx-ext="ignore:json-enc"
    hx-post="/secure/plans/{{ plan_id }}/approval"
    hx-encoding="multipart/form-data"
    hx-vals="js:{ first_png: first.value, second_png: second.value }"
>

where first and second are custom web components containing PNG images in the .value property.

In the old version, this works flawlessly. In the new version, the contents (first and second) are just completely missing from the request.