File Upload
Demonstrates how to upload a file via ajax with a progress bar
In this example we show how to create a file upload form that will be submitted via ajax, along with a progress bar.
We will show two different implementation, one in pure javascript (using some utility methods in htmx) and one in hyperscript
First the pure javascript version.
- We have a form of type multipart/form-data so that the file will be properly encoded
- We post the form to /upload
- We have a progress element
- We listen for the htmx:xhr:progress event and update the value attribute of the progress bar based on the loaded and total properties in the event detail.
```
@app.get
def method1():
js = """
htmx.on('#form', 'htmx:xhr:progress', function(evt) {
htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)
});
"""
form = Form(hx_target="#output", hx_post=upload.rt(), id="form")(
Input(type="file", name="file"),
Button("Upload"),
Progress(id="progress", value="0", max="100"),
Div(id="output"),
)
return form, Script(js)
```
The Hyperscript version is very similar, except:
The script is embedded directly on the form element
Hyperscript offers nicer syntax (although the htmx API is pretty nice too!)
```python
app, rt = fast_app(hdrs=[Script(src="https://unpkg.com/hyperscript.org@0.9.12")])
```
```
@app.get
def method2():
script = "on htmx:xhr:progress(loaded, total) set #progress2.value to (loaded/total)*100"
return Form(_=script, hx_target="#output2", hx_post=upload.rt())(
Input(type="file", name="file"),
Button("Upload"),
Progress(id="progress2", value="0", max="100"),
Div(id="output2"),
)
```
Note that hyperscript allows you to destructure properties from details directly into variables