Form file - more complex form example

[knzai]

Description

This gives a more complete picture of how node_refs, form_data, and async file "upload" (aka really just client-side parsing by the browser engine and/or js/wasm) interact.

Checklist

• [ x] I have reviewed my own code
• I have added tests
  Example tests?

[github-actions]

Size Comparison

examples	master (KB)	pull request (KB)	diff (KB)	diff (%)
async_clock	98.068	98.068	0	0.000%
boids	168.159	168.159	0	0.000%
communication_child_to_parent	90.539	90.539	0	0.000%
communication_grandchild_with_grandparent	102.779	102.779	0	0.000%
communication_grandparent_to_grandchild	98.203	98.203	0	0.000%
communication_parent_to_child	86.897	86.897	0	0.000%
contexts	102.372	102.372	0	0.000%
counter	83.542	83.542	0	0.000%
counter_functional	83.970	83.970	0	0.000%
dyn_create_destroy_apps	86.926	86.926	0	0.000%
file_upload	97.939	97.939	0	0.000%
form_file	N/A	95.671	N/A	N/A
function_memory_game	164.259	164.259	0	0.000%
function_router	337.352	337.352	0	0.000%
function_todomvc	158.268	158.268	0	0.000%
futures	226.148	226.148	0	0.000%
game_of_life	105.628	105.628	0	0.000%
immutable	186.278	186.278	0	0.000%
inner_html	77.901	77.901	0	0.000%
js_callback	105.852	105.852	0	0.000%
keyed_list	195.678	195.678	0	0.000%
mount_point	80.876	80.876	0	0.000%
nested_list	111.612	111.612	0	0.000%
node_refs	88.213	88.213	0	0.000%
password_strength	1712.032	1712.032	0	0.000%
portals	91.119	91.119	0	0.000%
router	308.030	308.030	0	0.000%
simple_ssr	138.079	138.079	0	0.000%
ssr_router	374.568	374.568	0	0.000%
suspense	112.432	112.432	0	0.000%
timer	86.465	86.465	0	0.000%
timer_functional	95.230	95.230	0	0.000%
todomvc	139.416	139.416	0	0.000%
two_apps	83.568	83.568	0	0.000%
web_worker_fib	132.148	132.148	0	0.000%
web_worker_prime	182.673	182.673	0	0.000%
webgl	80.578	80.578	0	0.000%

✅ None of the examples has changed their size significantly.

[ranile]

This example doesn't add anything yew specific. I also don't like the idea of adding more examples using struct components

[knzai]

I'm happy to change it to be a function component, if that helps.❤️

I got my need covered, I'm just trying to prevent someone else also spending a day digging through docs and code not finding an answer.

I made two PRs as more about providing two options for y'all than thinking both are needed: a more complex one showing closer to actual usage than the simpler form one just on how to use a form.

Below was my comment when I thought this comment was on the simple form, as a defense of needing a form example in some form (heyo) or another.

If there's anything else I can add that you think would better highlight yew I can including it. Or remove (well other than the form, cause showing how simple that is was kinda the point).

Oh also, the fact that all the old examples around the webs people use still use the FocusEvent not SubmitEvent despite that changing since 0.18. That was part of why I made an example.

--
As somehow who've been professionally building front and back end apps for 25 years? I gotta say, how to submit a form full of fields is the singular most common use case docs need to present and not having that flow be shown anywhere when a button counter is makes it seem less likely as a choice for building things out. There's like 15 examples or so and not that single most common flow.

It's a common enough question that it has to be a pinned comment in discord, which seems like mean it probably causes problems for people who don't seek out the discord? (it's why I joined the discord). Pave the cow paths with your docs, always.

Examples often show common usage patterns and how you do something with a top level package, regardless of where in the stack it is, imo. Like the file upload is all gloo and web-sys and js-sys really. If you browse the examples many of them don't add yew specifics, but yew stack specifics.

But, I also made a more fleshed out example that shows the interaction of a submit callback versus the file handling triggered by the input box, in another PR [oand r as the case turned out to be a simpler example with just a bare form]. And I'd happily merge this into the file upload example to add an alt text to it if you don't want there to be another example. I do think looking for "hey, how do I do a form full of fields" should be obvious though.