htmx send files using htmx.ajax() call

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,
})