Skip to content

htmx send files using htmx.ajax() call

New Courses Coming Soon

Join the waiting lists

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():

  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: