# htmx send files using htmx.ajax() call

> Learn how to send files with an htmx.ajax() call by setting hx-encoding to multipart/form-data and passing the source element so the files reach the server.

Author: Flavio Copes | Published: 2023-12-21 | Canonical: https://flaviocopes.com/htmx-send-files-using-htmxajax-call/

In a drag and drop file upload workflow I had the need to use [`htmx.ajax()`](https://htmx.org/api/#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 ](https://github.com/bigskysoftware/htmx/issues/1560)[`Content-Type`](https://github.com/bigskysoftware/htmx/issues/1560)[ header to ](https://github.com/bigskysoftware/htmx/issues/1560)[`multipart/form-data`](https://github.com/bigskysoftware/htmx/issues/1560), 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()`:

```typescript
<div
  ...
  hx-post={`/upload`}
  hx-encoding="multipart/form-data"
  hx-trigger="none"
>
```

```typescript
htmx.ajax('POST', 
  event.currentTarget.getAttribute('hx-post'), {
  values: {
    files: formData.getAll('files')
  },
  source: event.currentTarget,
})
```