htmx send files using htmx.ajax() call
New Course Coming Soon:
Get Really Good at Git
In a drag and drop file upload workflow I had the need to use htmx.ajax()
to fire a network call to upload files, but I had some trouble sending data to the server.
After some research I found out using htmx.ajax()
you cannot (at the time of writing) set the Content-Type
header to multipart/form-data
, which is what makes file uploads possible in HTTP.
To overcome this, you must set the hx-encoding
attribute in the HTML, and use the source
property in the context object passed to htmx.ajax()
:
<div
...
hx-post={`/upload`}
hx-encoding="multipart/form-data"
hx-trigger="none"
>
htmx.ajax('POST',
event.currentTarget.getAttribute('hx-post'), {
values: {
files: formData.getAll('files')
},
source: event.currentTarget,
})
→ Read my HTMX Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X