Skip to content

use fetch request to upload form data #859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

use fetch request to upload form data #859

wants to merge 7 commits into from

Conversation

rmorshea
Copy link
Collaborator

@rmorshea rmorshea commented Dec 29, 2022

closes: #574

This change prevents the default behavior of a <form> element's onSubmit event handler. Instead of navigating away from the current page to submit form data, it is sent to the server via a Javascript fetch request. We do not push form data into the URL (this behavior will be left to third party packages like idom-router).

Improving form submission behavior will allow users to use form elements to send, among other things, file data to servers. For example, the following will now be possible:

from idom import component, html
from idom.backend.starlette import configure
from starlette.applications import Starlette

app = Starlette()

async def handle_file_upload(request):
    form = await request.form()
    ...  # do stuff with the form

app.add_route("/file-upload", handle_file_upload, methods=["POST"])

@component
def Example():
    return html.form(
        {
            "enctype": "multipart/form-data",
            "action": "/file-upload",
            "method": "POST",
        },
        html.input({"type": "file", "name": "file", "id": "file-input"}),
        html.input({"type": "submit", "id": "form-submit"}),
    )

configure(app, Example)

Checklist

Please update this checklist as you complete each item:

  • Tests have been included for all bug fixes or added functionality.
  • The changelog.rst has been updated with any significant changes.
  • GitHub Issues which may be closed by this Pull Request have been linked.

@rmorshea
Copy link
Collaborator Author

cc: @Archmonger thoughts on this?

@Archmonger
Copy link
Contributor

Archmonger commented Dec 29, 2022

Is there any way to automate this route handling with some combination of Context scoping and uuid session uniqueness?

Ideally these route would get automatically created within from idom.backend.my_chosen_backend import configure.

See here.


Also, how would "signaling back" to IDOM work in this scenario?

@rmorshea
Copy link
Collaborator Author

rmorshea commented Dec 29, 2022

After thinking further, modifying the default behavior of forms might not have been the best idea. Doing so should probably be the purview of third-party packages (e.g. idom-router a la React Router's forms).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Serialize File Content
2 participants