[BUG] Incorrect hx-post Value Breaks File Upload in Example

[plops]

In the example code 'Single File Uploads' and 'Multiple File Uploads' is not working for me.

The hx-post attribute in the file upload form is incorrectly populated with the Python function object representation instead of the function name string "upload", causing htmx to fail processing the form submission.

Minimal Reproducible Example

# This is a copy of the non-working code from here https://docs.fastht.ml/tutorials/quickstart_for_web_devs.html
from fasthtml.common import *
from pathlib import Path

app, rt = fast_app()

upload_dir = Path("filez")
upload_dir.mkdir(exist_ok=True)

@rt('/')
def get():
    return Titled("File Upload Demo",
        Article(
# The following line should contain hx_post="upload" 
            Form(hx_post=upload, hx_target="#result-one")(
                Input(type="file", name="file"),
                Button("Upload", type="submit", cls='secondary'),
            ),
            Div(id="result-one")
        )
    )

def FileMetaDataCard(file):
    return Article(
        Header(H3(file.filename)),
        Ul(
            Li('Size: ', file.size),            
            Li('Content Type: ', file.content_type),
            Li('Headers: ', file.headers),
        )
    )    

@rt
async def upload(file: UploadFile):
    card = FileMetaDataCard(file)
    filebuffer = await file.read()
    (upload_dir / file.filename).write_bytes(filebuffer)
    return card

serve()

Expected behavior
The generated HTML should contain hx-post="upload", allowing htmx to correctly submit the form to the /upload route.

Actual Behavior: hx-post="<function upload at 0x...>"

Environment Information
Please provide the following version information:

• fastlite version: 23993b133c843ae5ada63e5a72bfd22bd822301d
• fastcore version: 00de908bb27c589dd1723efcb80512ebee00c4d3
• fasthtml version: 61ecb09

Confirmation
Please confirm the following:

• I have read the FAQ (https://docs.fastht.ml/explains/faq.html)
• I have provided a minimal reproducible example
• I have included the versions of fastlite, fastcore, and fasthtml
• I understand that this is a volunteer open source project with no commercial support.

Additional context

Affected File: nbs/tutorials/quickstart_for_web_devs.ipynb (likely the only file needing changes, though nbs/llms-ctx-full.txt and nbs/llms-ctx.txt contain the related function).

I think two code examples 'Single File Uploads' and 'Multiple File Uploads' have this issue.

[TransparentIA]

Hi plops, I can reproduce the issue with FastHTML version '0.9.1'. Odd enough, it works in a Jupyter notebook. So, I found that specifying the host in the python script works again: serve(host='localhost') It might be that '0.0.0.0' is not converted to 'localhost' ?

…

On Thu, Nov 21, 2024 at 2:16 PM plops ***@***.***> wrote: In the example code 'Single File Uploads' and 'Multiple File Uploads' is not working for me. The hx-post attribute in the file upload form is incorrectly populated with the Python function object representation instead of the function name string "upload", causing htmx to fail processing the form submission. *Minimal Reproducible Example* Provide a minimal code snippet that reproduces the issue. This is crucial for us to understand and fix the bug quickly. # This is a copy of the non-working code from here https://docs.fastht.ml/tutorials/quickstart_for_web_devs.htmlfrom fasthtml.common import *from pathlib import Path app, rt = fast_app() upload_dir = Path("filez")upload_dir.mkdir(exist_ok=True) @rt('/')def get(): return Titled("File Upload Demo", Article(# The following line should contain hx_post="upload" 1 Form(hx_post=upload, hx_target="#result-one")(2 Input(type="file", name="file"), Button("Upload", type="submit", cls='secondary'), ), Div(id="result-one") ) ) def FileMetaDataCard(file): return Article( Header(H3(file.filename)), Ul( Li('Size: ', file.size), Li('Content Type: ', file.content_type), Li('Headers: ', file.headers), ) ) @rt3async def upload(file: UploadFile):4 card = FileMetaDataCard(file)5 filebuffer = await file.read()6 (upload_dir / file.filename).write_bytes(filebuffer) return card serve() *Expected behavior* The generated HTML should contain hx-post="upload", allowing htmx to correctly submit the form to the /upload route. *Actual Behavior:* hx-post="<function upload at 0x...>" *Environment Information* Please provide the following version information: - fastlite version: 23993b133c843ae5ada63e5a72bfd22bd822301d - fastcore version: 00de908bb27c589dd1723efcb80512ebee00c4d3 - fasthtml version: 61ecb09 <61ecb09> *Confirmation* Please confirm the following: - I have read the FAQ (https://docs.fastht.ml/explains/faq.html) - I have provided a minimal reproducible example - I have included the versions of fastlite, fastcore, and fasthtml - I understand that this is a volunteer open source project with no commercial support. *Additional context* *Affected File:* nbs/tutorials/quickstart_for_web_devs.ipynb (likely the only file needing changes, though nbs/llms-ctx-full.txt and nbs/llms-ctx.txt contain the related function). I think two code examples 'Single File Uploads' and 'Multiple File Uploads' have this issue. — Reply to this email directly, view it on GitHub <#584>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BMRMPJTDSYW4UIKLTHVZACT2BXMLTAVCNFSM6AAAAABSG7H5ZOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGY3TSNBQGY3TMOI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[plops]

@TransparentIA your observation intrigued me, so I tried the extra option for the serve call myself.

For me adding the option host='localhost' to the serve() call doesn't fix the issue.

serve()
# => INFO:     127.0.0.1:58928 - "POST /%3Cfunction%20upload%20at%200x7f24d96ccea0%3E HTTP/1.1" 404 Not Found


serve(host='localhost')
# => INFO:     127.0.0.1:53432 - "POST /%3Cfunction%20upload%20at%200x7fe87a4c8f40%3E HTTP/1.1" 404 Not Found

# The proper fix:
Form(hx_post="upload", hx_target="#result-one") ... 
serve()
# => INFO:     127.0.0.1:49164 - "POST /upload HTTP/1.1" 200 OK

Note that I added the relevant lines from the log output after # =>