file browser support

[databasedav]

i am thinking this should be a special button that opens the host's file browser UI and allows files to be selected as one would expect, once the files are selected and confirmed, the bytes should end up in a variable somewhere in Zoon (not sure how it's api should look, perhaps passing a mutable to the button or something)

[MartinKavik]

• And there should be a way to upload the file(s) to the Moon app through Connection.
• Also drag&drop would be nice as an alternative to the button.

[databasedav]

any update on this? looks like these api's https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications need zoonic wrapping

in addition to the above features, it would be great to easily be able to expose a live preview of the uploaded file (e.g. showing the image)

[MartinKavik]

any update on this?

I'll need it in both production MZ apps I'm writing but file uploading hasn't been priority yet. I'm keeping it my mind, I'll update the issue once there is something ready.

[databasedav]

this actually ended up being pretty simple to do with just web-sys, gloo-file, and gloo-net

first, modify the type attr of a TextInput and add an on change listener which places the selected file in a Mutable file

TextInput::new()
.label_hidden("")
.update_raw_el(|raw_el| {
    let dom_element = raw_el.dom_element();
    raw_el
    .attr("type", "file")
    .style("white-space", "nowrap")
    .event_handler(clone!((file) move |_: events::Input| {
        if let Some(files) = dom_element.files() {
            let files: gloo_file::FileList = files.into();
            if let Some(f) = files.first() {
                file.set(Some(SendWrapper::new(f.clone())));
            }
        }
    }))
})

then use gloo_file::futures to extract the data into your desired format, for example, u can get it into a data:image format to pass to Image.url(...) with this

if let Some(f) = file.get_cloned() {
    if let Ok(url) = gloo_file::futures::read_as_data_url(&*f).await {
        url ...
    }
}

finally, send it to your api with web_sys::FormData and gloo_net::http::Request

if let Some(f) = file.get_cloned() {
    let form_data = web_sys::FormData::new()?;
    form_data.set_with_blob("file", f.as_ref())?;
    gloo_net::http::Request::post(endpoint).body(form_data).send().await?
}

[qtisan]

Hi, @MartinKavik , why not make tailwindcss integrated? A new styling solution would be long time for production.