File Upload

from fasthtml.common import H3, Button, Div, Form, Hr, Input, Progress, Script, fast_app
from starlette.datastructures import UploadFile

app, rt = fast_app(hdrs=[Script(src="https://unpkg.com/hyperscript.org@0.9.12")])


@app.get
def page():
    return Div(
        Div(H3("Method 1: Pure JS"), Div(method1())),
        Hr(),
        Div(H3("Method 2: Hyperscript"), Div(method2())),
        cls="container",
    )


@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, id="form")(
        Input(type="file", name="file"),
        Button("Upload"),
        Progress(id="progress", value="0", max="100", style="margin-top:20px"),
        Div(id="output"),
    )
    return form, Script(js)


@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)(
        Input(type="file", name="file"),
        Button("Upload"),
        Progress(id="progress2", value="0", max="100", style="margin-top:20px"),
        Div(id="output2"),
    )


@app.post
async def upload(file: UploadFile):
    # print(len(await file.read()))
    return Div(f"Uploaded! Filename: {file.filename}. Filesize: {file.size}")

Server Calls