Example Handling Input Files With Yew

example_file_input.rs

use yew::events::ChangeData;
use yew::web_sys::File;
use yew::prelude::*;

pub struct MyFileInput {
    link: ComponentLink<Self>,
    file: Option<File>,
}

pub enum Msg {
    SelectFile(Option<File>),
    ClearFile,
}

impl Component for MyFileInput {
    type Properties = ();
    type Message = Msg;

    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            file: None,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::SelectFile(file) => {
                self.file = file;
            },
            Msg::ClearFile => {
                self.file = None;
            },
        }
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        false // No properties, so it should never change based on props
    }

    fn view(&self) -> Html {
        match &self.file {
            Some(file) => html! {
                <div>
                    <p>{ "Filename: "}<span>{ file.name() }</span></p>
                    <p>{ "Last Modified: " }<span>{ file.last_modified() }</span></p>
                    <p>{ "Size: " }<span>{ file.size() }</span></p>
                    <button onclick=self.link.callback(|_| Msg::ClearFile)>{ "Clear" }</button>
                </div>
            },
            None => html! {
                <input type="file" id="file-input" onchange=self.link.callback(|cd: ChangeData| {
                    match cd {
                        ChangeData::Files(file_list) => {
                            log::info!("File list: {:?}", file_list.get(0));
                            Msg::SelectFile(file_list.get(0))
                        },
                        default => Msg::ClearFile
                    }
                })/>
            },
        }
    }
}