can I upload an image from client to server?

[AndyJado]

there are only buttons and text in examples

[gbj]

Yes.

The answer to the question "How?" depends a lot on how much you already know about the various Web APIs involved, how comfortable you are accessing web APIs from Rust using the web-sys crate, etc.

Here's an example another user created that I found by searching in our Discord -- I don't take any credit for it.

#[component]
fn UploadFileForm<F>(on_upload_finished: F) -> impl IntoView
where
    F: Fn(bool) + 'static + Clone,
{
    let error: RwSignal<Option<Box<dyn Error>>> = create_rw_signal(None);
    let form_ref: NodeRef<html::Form> = create_node_ref();
    let on_submit = move |ev: SubmitEvent| {
        ev.prevent_default();
        let form = form_ref.get().expect("noform");
        let action = form
            .get_attribute("action")
            .unwrap_or_default()
            .to_lowercase();
        let form_data = web_sys::FormData::new_with_form(&form).unwrap_throw();
        spawn_local(async move {
            let res = gloo_net::http::Request::post(&action)
                .header("Accept", "application/json")
                .body(form_data)
                .unwrap()
                .send()
                .await;
            if let Err(err) = res {
                log::error!("<Form/> error while POSTing: {err:#?}");
                error.try_set(Some(Box::new(err)));
            }
        });
        let has_error = error.with_untracked(|value| value.is_some());
        on_upload_finished(has_error);
    };
    view! {
        <Form error=error node_ref=form_ref enctype="multipart/form-data".to_string() action="/upload" on:submit=on_submit>
            <label>"Upload file" <input type="file" id="path" name="path"/></label>
            <input type="submit" value="Upload"/>
        </Form>
    }
}

Alternately, with the new server functions on the main branch we have examples of file upload using multipart form data

leptos/examples/server_fns_axum/src/app.rs

Lines 321 to 384 in 7d1ce45

	#[component]
	pub fn FileUpload() -> impl IntoView {
	/// A simple file upload function, which does just returns the length of the file.
	///
	/// On the server, this uses the `multer` crate, which provides a streaming API.
	#[server(
	input = MultipartFormData,
	)]
	pub async fn file_length(
	data: MultipartData,
	) -> Result<usize, ServerFnError> {
	// `.into_inner()` returns the inner `multer` stream
	// it is `None` if we call this on the client, but always `Some(_)` on the server, so is safe to
	// unwrap
	let mut data = data.into_inner().unwrap();
	// this will just measure the total number of bytes uploaded
	let mut count = 0;
	while let Ok(Some(mut field)) = data.next_field().await {
	println!("\n[NEXT FIELD]\n");
	let name = field.name().unwrap_or_default().to_string();
	println!(" [NAME] {name}");
	while let Ok(Some(chunk)) = field.chunk().await {
	let len = chunk.len();
	count += len;
	println!(" [CHUNK] {len}");
	// in a real server function, you'd do something like saving the file here
	}
	}
	Ok(count)
	}
	let upload_action = create_action(|data: &FormData| {
	let data = data.clone();
	// `MultipartData` implements `From<FormData>`
	file_length(data.into())
	});
	view! {
	<h3>File Upload</h3>
	<p>Uploading files is fairly easy using multipart form data.</p>
	<form on:submit=move |ev: SubmitEvent| {
	ev.prevent_default();
	let target = ev.target().unwrap().unchecked_into::<HtmlFormElement>();
	let form_data = FormData::new_with_form(&target).unwrap();
	upload_action.dispatch(form_data);
	}>
	<input type="file" name="file_to_upload"/>
	<input type="submit"/>
	</form>
	<p>
	{move || if upload_action.input().get().is_none() && upload_action.value().get().is_none() {
	"Upload a file.".to_string()
	} else if upload_action.pending().get() {
	"Uploading...".to_string()
	} else if let Some(Ok(value)) = upload_action.value().get() {
	value.to_string()
	} else {
	format!("{:?}", upload_action.value().get())
	}}
	</p>
	}
	}

[AndyJado]

it seems I couldn't read the Request Body now: RequestParts just disappered.

    let req_parts = use_context::<leptos_axum::RequestParts>();

[gbj]

it seems I couldn't read the Request Body now: RequestParts just disappered.

When you are looking for help it is really helpful to include more information than you have. For example, are you using 0.6/the main branch, or 0.5? What does "just disappeared" mean (is there a compile error?) etc.

It may be as simple as replacing this with Parts ; we have removed RequestParts as no longer necessary because http::Parts is now Clone.