move file_input to a component

Author: knzai

src/wasm/image.rs

@@ -13,6 +13,7 @@ use crate::wasm::FileUpload;
 
 pub struct ImageFile<'a> {
     file_input: &'a FileUpload,
+
     width: usize,
     height: usize,
 }
@@ -106,14 +107,16 @@ impl Component for ImageComponent {
         });
 
         html! {
-            <form onsubmit={noop}>
+            <div>
+                <form onsubmit={noop}>
+                        <label for="width">{"[Tile] Width"}</label>
+                        <input name="width" type="number" value={image.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
+                        <label for="height">{"[Tile] Height"}</label>
+                        <input name="height" type="number" value={image.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
+                </form>
                 { &image.name() }
-                <label for="width">{"[Tile] Width"}</label>
-                <input name="width" type="number" value={image.width.to_string()} onchange={ctx.link().callback(Msg::Width)} />
-                <label for="height">{"[Tile] Height"}</label>
-                <input name="height" type="number" value={image.height.to_string()} onchange={ctx.link().callback(Msg::Height)} />
                 <img src={output} />
-            </form>
+            </div>
         }
     }
 }

src/wasm/main.rs

@@ -1,20 +1,14 @@
 #![cfg(feature = "wasm")]
-use std::collections::HashMap;
-
-use gloo::file::callbacks::FileReader;
-use web_sys::HtmlInputElement;
 use yew::prelude::*;
 
 use cega::wasm::image::*;
-use cega::wasm::FileUpload;
+use cega::wasm::{FileInput, FileUpload};
 
 pub enum Msg {
     Loaded(FileUpload),
-    Submit(Event),
 }
 
 pub struct App {
-    readers: HashMap<String, FileReader>,
     files: Vec<FileUpload>,
 }
 
@@ -24,53 +18,23 @@ impl Component for App {
 
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            readers: HashMap::default(),
             files: Vec::default(),
         }
     }
 
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::Loaded(file) => {
-                self.readers.remove(&file.name);
                 self.files.push(file);
             }
-            Msg::Submit(e) => {
-                let input: HtmlInputElement = e.target_unchecked_into();
-                if let Some(files) = input.files() {
-                    for file in gloo::file::FileList::from(files).iter() {
-                        let link = ctx.link().clone();
-                        let name = file.name().clone();
-                        let mime_type = file.raw_mime_type();
-                        let task = {
-                            gloo::file::callbacks::read_as_bytes(&file, move |res| {
-                                link.send_message(Msg::Loaded(FileUpload {
-                                    data: res.expect("failed to read file"),
-                                    mime_type,
-                                    name,
-                                }))
-                            })
-                        };
-                        self.readers.insert(file.name(), task);
-                    }
-                }
-            }
         }
         true
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div id="wrapper">
-                <label for="file-upload">
-                </label>
-                <input
-                    id="file-upload"
-                    type="file"
-                    accept="image/*,.bin,.cga,.ega"
-                    multiple={false}
-                    onchange={ctx.link().callback(Msg::Submit)}
-                />
+                <FileInput accept="image/*,.bin,.cga,.ega" multiple=false onload={ctx.link().callback( Msg::Loaded )}/>
                 <div id="preview-area">
                     {for self.files.iter().map(|f|
                         html! { <ImageComponent file={f.clone()} /> }

src/wasm/mod.rs

@@ -1,8 +1,5 @@
+pub mod file_input;
 pub mod image;
 
-#[derive(Clone, PartialEq)]
-pub struct FileUpload {
-    pub name: String,
-    pub mime_type: String,
-    pub data: Vec<u8>,
-}
+pub use file_input::FileInput;
+pub use file_input::FileUpload;