codify "platform" into resolution logic, server-fn/fullstack overhaul (#4596)
overhaul dioxus fullstack using a new implementation of server_fn This PR is a complete rewrite of dioxus fullstack designed to improve compatibility with axum and to fix a number of compilation errors based on feature flag unification plumbing through macros.
This commit is contained in:
1 parent
8421c3aef0
commit
f2b1c6d97f
424 files changed
+17284
-6624
No files matched your search
@@ -0,0 +1,64 @@
|
||||
//! This example showcases how to handle multipart form data uploads in Dioxus.
|
||||
//!
|
||||
//! Dioxus provides the `MultipartFormData` type to allow converting from the websys `FormData`
|
||||
//! type directly into a streaming multipart form data handler.
|
||||
|
||||
use dioxus::{fullstack::MultipartFormData, prelude::*};
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(app);
|
||||
}
|
||||
|
||||
fn app() -> Element {
|
||||
// The `MultipartFormData` type can be used to handle multipart form data uploads.
|
||||
// We can convert into it by using `.into()` on the `FormEvent`'s data, or by crafting
|
||||
// a `MultipartFormData` instance manually.
|
||||
let mut upload_as_multipart = use_action(move |event: FormEvent| upload(event.into()));
|
||||
|
||||
rsx! {
|
||||
Stylesheet { href: asset!("/examples/assets/file_upload.css") }
|
||||
img { src: asset!("/examples/assets/logo.png"), width: "200px" }
|
||||
div {
|
||||
h3 { "Upload as Multipart" }
|
||||
p { "Use the built-in multipart form handling" }
|
||||
form {
|
||||
display: "flex",
|
||||
flex_direction: "column",
|
||||
gap: "8px",
|
||||
onsubmit: move |evt| async move {
|
||||
evt.prevent_default();
|
||||
upload_as_multipart.call(evt).await;
|
||||
},
|
||||
label { r#for: "headshot", "Photos" }
|
||||
input { r#type: "file", name: "headshot", multiple: true, accept: ".png,.jpg,.jpeg" }
|
||||
label { r#for: "resume", "Resume" }
|
||||
input { r#type: "file", name: "resume", multiple: false, accept: ".pdf" }
|
||||
label { r#for: "name", "Name" }
|
||||
input { r#type: "text", name: "name", placeholder: "Name" }
|
||||
label { r#for: "age", "Age" }
|
||||
input { r#type: "number", name: "age", placeholder: "Age" }
|
||||
input { r#type: "submit", name: "submit", value: "Submit your resume" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Upload a form as multipart form data.
|
||||
///
|
||||
/// MultipartFormData is typed over the form data structure, allowing us to extract
|
||||
/// both files and other form fields in a type-safe manner.
|
||||
///
|
||||
/// On the server, we have access to axum's `Multipart` extractor
|
||||
#[post("/api/upload-multipart")]
|
||||
async fn upload(mut form: MultipartFormData) -> Result<()> {
|
||||
while let Ok(Some(field)) = form.next_field().await {
|
||||
info!(
|
||||
"Field name: {:?}, filename: {:?}, content_type: {:?}",
|
||||
field.name().to_owned(),
|
||||
field.file_name(),
|
||||
field.content_type(),
|
||||
);
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
Reference in new issue
Block a user