Jonathan Kelley
f2b1c6d97f
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.
65 lines
2.5 KiB
Rust
65 lines
2.5 KiB
Rust
//! 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(())
|
|
}
|