create web file engine

packages/web/Cargo.toml

@@ -32,6 +32,7 @@ futures-channel = "0.3.21"
 serde_json = { version = "1.0" }
 serde = { version = "1.0" }
 serde-wasm-bindgen = "0.4.5"
+async-trait = "0.1.58"
 
 [dependencies.web-sys]
 version = "0.3.56"
@@ -76,6 +77,9 @@ features = [
     "Location",
     "MessageEvent",
     "console",
+    "FileList",
+    "File",
+    "FileReader"
 ]
 
 [features]

packages/web/src/dom.rs

@@ -10,15 +10,15 @@
 use dioxus_core::{
     BorrowedAttributeValue, ElementId, Mutation, Template, TemplateAttribute, TemplateNode,
 };
-use dioxus_html::{event_bubbles, CompositionData, FormData};
+use dioxus_html::{event_bubbles, CompositionData, FileEngine, FormData};
 use dioxus_interpreter_js::{save_template, Channel};
 use futures_channel::mpsc;
 use rustc_hash::FxHashMap;
-use std::{any::Any, rc::Rc};
+use std::{any::Any, rc::Rc, sync::Arc};
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{Document, Element, Event, HtmlElement};
+use web_sys::{console, Document, Element, Event, HtmlElement};
 
-use crate::Config;
+use crate::{file_engine::WebFileEngine, Config};
 
 pub struct WebsysDom {
     document: Document,
@@ -206,6 +206,7 @@ impl WebsysDom {
                 },
                 SetText { value, id } => i.set_text(id.0 as u32, value),
                 NewEventListener { name, id, .. } => {
+                    console::log_1(&format!("new event listener: {}", name).into());
                     i.new_event_listener(name, id.0 as u32, event_bubbles(name) as u8);
                 }
                 RemoveEventListener { name, id } => {
@@ -224,6 +225,7 @@ impl WebsysDom {
 // We need tests that simulate clicks/etc and make sure every event type works.
 pub fn virtual_event_from_websys_event(event: web_sys::Event, target: Element) -> Rc<dyn Any> {
     use dioxus_html::events::*;
+    console::log_1(&event.clone().into());
 
     match event.type_().as_str() {
         "copy" | "cut" | "paste" => Rc::new(ClipboardData {}),
@@ -359,10 +361,18 @@ fn read_input_to_data(target: Element) -> Rc<FormData> {
         }
     }
 
+    let files = target
+        .dyn_ref()
+        .and_then(|input: &web_sys::HtmlInputElement| {
+            input.files().and_then(|files| {
+                WebFileEngine::new(files).map(|f| Arc::new(f) as Arc<dyn FileEngine>)
+            })
+        });
+
     Rc::new(FormData {
         value,
         values,
-        files: None,
+        files,
     })
 }
 

packages/web/src/file_engine.rs

@@ -0,0 +1,103 @@
+use dioxus_html::FileEngine;
+use futures_channel::oneshot;
+use js_sys::Uint8Array;
+use wasm_bindgen::{prelude::Closure, JsCast};
+use web_sys::{File, FileList, FileReader};
+
+pub(crate) struct WebFileEngine {
+    file_reader: FileReader,
+    file_list: FileList,
+}
+
+impl WebFileEngine {
+    pub fn new(file_list: FileList) -> Option<Self> {
+        Some(Self {
+            file_list,
+            file_reader: FileReader::new().ok()?,
+        })
+    }
+
+    fn len(&self) -> usize {
+        self.file_list.length() as usize
+    }
+
+    fn get(&self, index: usize) -> Option<File> {
+        self.file_list.item(index as u32)
+    }
+
+    fn find(&self, name: &str) -> Option<File> {
+        (0..self.len())
+            .filter_map(|i| self.get(i))
+            .find(|f| f.name() == name)
+    }
+}
+
+#[async_trait::async_trait(?Send)]
+impl FileEngine for WebFileEngine {
+    fn files(&self) -> Vec<String> {
+        (0..self.len())
+            .filter_map(|i| self.get(i).map(|f| f.name()))
+            .collect()
+    }
+
+    // read a file to bytes
+    async fn read_file(&self, file: &str) -> Option<Vec<u8>> {
+        let file = self.find(file)?;
+
+        let file_reader = self.file_reader.clone();
+        let (rx, tx) = oneshot::channel();
+        let on_load: Closure<dyn FnMut()> = Closure::new({
+            let mut rx = Some(rx);
+            move || {
+                let result = file_reader.result();
+                let _ = rx
+                    .take()
+                    .expect("multiple files read without refreshing the channel")
+                    .send(result);
+            }
+        });
+
+        self.file_reader
+            .set_onload(Some(on_load.as_ref().unchecked_ref()));
+        on_load.forget();
+        self.file_reader.read_as_array_buffer(&file).ok()?;
+
+        if let Ok(Ok(js_val)) = tx.await {
+            let as_u8_arr = Uint8Array::new(&js_val);
+            let as_u8_vec = as_u8_arr.to_vec();
+
+            Some(as_u8_vec)
+        } else {
+            None
+        }
+    }
+
+    // read a file to string
+    async fn read_file_to_string(&self, file: &str) -> Option<String> {
+        let file = self.find(file)?;
+
+        let file_reader = self.file_reader.clone();
+        let (rx, tx) = oneshot::channel();
+        let on_load: Closure<dyn FnMut()> = Closure::new({
+            let mut rx = Some(rx);
+            move || {
+                let result = file_reader.result();
+                let _ = rx
+                    .take()
+                    .expect("multiple files read without refreshing the channel")
+                    .send(result);
+            }
+        });
+
+        self.file_reader
+            .set_onload(Some(on_load.as_ref().unchecked_ref()));
+        on_load.forget();
+        self.file_reader.read_as_text(&file).ok()?;
+
+        if let Ok(Ok(js_val)) = tx.await {
+            js_val.as_string()
+        } else {
+            None
+        }
+    }
+}

packages/web/src/lib.rs

@@ -61,6 +61,7 @@ use futures_util::{pin_mut, FutureExt, StreamExt};
 mod cache;
 mod cfg;
 mod dom;
+mod file_engine;
 mod hot_reload;
 #[cfg(feature = "hydrate")]
 mod rehydrate;