Multipart / Streaming File Upload

[sebadob]

I am trying to do a multipart file upload with Leptos and I am a bit stuck at the moment.

First, I tried to get the file content from the input element with the .files() method after on:change or or:input to actually handle the upload on the client side with a prevent_default() to not redirect the user and show some nice progress bar.

I enabled File and FileList from the web-sys crate and tried:

let elem = ev.unchecked_into::<HtmlInputElement>();
let files = elem.files();

But no matter which combination I try, files is always None even when the <input> element in the browser actually shows the correct file name and so on.

When I do something like this, I can actually verify the correct file name being set but still with files == None:

let on_change = move |ev: Event| {
    let val = event_target_value(&ev);
    let elem = ev.unchecked_into::<HtmlInputElement>();
    let files = elem.files();
    log!("value: {:?} files: {:?}", val, files);
};

I then tried to figure out how I could maybe do this directly from an <ActionForm> but I did not find a type which worked out in the end.

Has anyone done this already and can maybe give me a hint?

EDIT:

With an on:drop I was able to actually get the .files(), but not with the classic "Upload File Button".

let on_drop = move |ev: DragEvent| {
    if let Some(data) = ev.data_transfer() {
        if let Some(files) = data.files() {
            for i in 0..files.length() {
                let file = files.get(i).unwrap();
                let name = file.name();
                log!("file: {:?}", name);
            }
       }
    }
};

[gbj]

Not sure what exactly's going wrong here but I'm able to get Some(_) with a pretty simple example:

#[component]
pub fn App(cx: Scope) -> impl IntoView {
    let file_input = create_node_ref::<html::Input>(cx);
    view! { cx,
        <form>
            <input type="file" node_ref=file_input
                on:change=move |ev| {
                    let files = file_input.get().unwrap().files();
                    log!("files: {:?}", files);
                }
            />
            <input type="submit"/>
        </form>
    }
}

[gbj]

Oh actually I do see what's going wrong:

let elem = ev.unchecked_into::<HtmlInputElement>();

this is wrong. You're typecasting an Event into an HtmlInputElement. You want

let elem = ev.target().unwrap().unchecked_into::<HtmlInputElement>();

[sebadob]

Oh well, yeah, that did it. Such an easy fix.

Actually, the hardest part when migrating from Javascript based frameworks to WASM is the conversion between the two. Things like "I know what this is in JS, but how can I convert it to Rust now".

Thank you a lot!

[qrilka]

Slightly off-topic but @gbj but is there some way to cast leptos::html::Input into HtmlInputElement? I searched though the docs and JsCast seems to be available only for event targets. Is there any docs covering leptos <-> web-sys usage scenarios?

[gbj]

@qrilka HtmlElement<El> implements the Deref trait to the appropriately-typed web-sys element, so: yes. You should be able to just use web-sys methods for the HtmlInputElement type on it, although you may sometimes need to manually deref.

See comment here and the discussion in the PR in general.

[qrilka]

Thanks @gbj actually I found it already some minutes ago: rustdocs pages are quite huge so it's quite easy to miss this Deref implementation, the PR looks to address that. And as for enabling web-sys features - is that also mentioned in the leptos docs already?