itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
carson 2020-09-30 08:57:45 -06:00
parent 355ed7af81
commit afc3b26225
4 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
www/attributes/hx-encoding.md Normal file
View File

@ -0,0 +1,17 @@
---
layout: layout.njk
title: </> htmx - hx-encoding
---
## `hx-encoding`
The `hx-encoding` attribute allows you to switch the request encoding from the usual `application/x-www-form-urlencoded`
encoding to `multipart/form-data`, usually to support file uploads in an ajax request.
The value of this attribute should be `multipart/form-data`.
The `hx-encoding` tag may be placed on parent elements.
### Notes
* `hx-encoding` is inherited and can be placed on a parent element

12
www/docs.md
View File

@ -344,6 +344,18 @@ If you wish to filter out some parameters you can use the [hx-params](/attribute
Finally, if you want to programatically modify the parameters, you can use the [htmx:configRequest](/events#htmx:configRequest)
event.
#### <a name="files"></a> [File Upload](#files)
If you wish to upload files via an htmx request, you can set the [hx-encoding](/attributes/hx-encoding) attribute to
`multipart/form-data`. This will use a `FormData` object to submit the request, which will properly include the file
in the request.
Note that depending on your server-side technology, you may have to handle requests with this type of body content very
differently.
Note that htmx fires a `htmx:xhr:progress` event periodically based on the standard `progress` event during upload,
which you can hook into to show the progress of the upload.
#### <a name="vars"></a> [Variables](#variables)
You can also include dynamically computed variables in the parameters of a request by using the

31
www/events.md
View File

@ -290,3 +290,34 @@ This event is triggered when a request is halted due to validation errors.
* `detail.elt` - the element that triggered the request
* `detail.errors` - an array of error objects with the invalid elements and errors associated with them
### <a name="htmx:xhr:abort"></a> Event - [htmx:xhr:abort](#htmx:xhr:abort)
This event is triggered when an ajax request aborts
##### Details
* `detail.elt` - the element that triggered the request
### <a name="htmx:xhr:loadstart"></a> Event - [htmx:xhr:loadstart](#htmx:xhr:loadstart)
This event is triggered when an ajax request starts
##### Details
* `detail.elt` - the element that triggered the request
### <a name="htmx:xhr:loadend"></a> Event - [htmx:xhr:loadend](#htmx:xhr:loadend)
This event is triggered when an ajax request finishes
##### Details
* `detail.elt` - the element that triggered the request
### <a name="htmx:xhr:progress"></a> Event - [htmx:xhr:progress](#htmx:xhr:progress)
This event is triggered periodically when an ajax request that supports progress is in flight
##### Details
* `detail.elt` - the element that triggered the request

4
www/reference.md
View File

@ -122,6 +122,10 @@ title: </> htmx - Attributes
| [`htmx:validation:validate`](/events#htmx:validation:validate) | triggered before an element is validated
| [`htmx:validation:failed`](/events#htmx:validation:failed) | triggered when an element fails validation
| [`htmx:validation:halted`](/events#htmx:validation:halted) | triggered when a request is halted due to validation errors
| [`htmx:xhr:abort`](/events#htmx:xhr:abort) | triggered when an ajax request aborts
| [`htmx:xhr:loadend`](/events#htmx:xhr:loadend) | triggered when an ajax request ends
| [`htmx:xhr:loadstart`](/events#htmx:xhr:loadstart) | triggered when an ajax request starts
| [`htmx:xhr:progress`](/events#htmx:xhr:progress) | triggered periodically during an ajax request that supports progress events
</div>