Use a ListPatchModel to keep track of the uploads list

+.upload {
+	float: left;
+	width: 400px;
+	padding: 1em;
+	border-radius: .5em;
+	border: 1px solid #ddd;
+	background: #f7f7f7;
+}
+
+.upload ul {
+	padding-left: 5px;
+}
+
+.upload > ul {
+	max-height: 15em;
+	width: calc(100% - 10px);
+	overflow-y: auto;
+	overflow-x: hidden;
+	background: #ffffff;
+	border-radius: .35em;
+	border: 2px solid #bbb;
+}
+
+.upload > ul > li {
+	display: flex;
+	border: 1px solid black;
+	width: fit-content;
+}
+
+.upload > ul > li > ul > li {
+	display: block;
+}
+
 .markdown {
 	float: left;
 	padding: 1em;

 pub(crate) mod markdown;
+pub(crate) mod upload;

+use std::fmt::Display;
+
+use super::super::error::*;
+use super::super::client::Client;
+
+#[derive(Debug, Clone)]
+pub struct Upload {
+    client: Client,
+}
+
+impl Upload {
+    pub(crate) async fn new(name :&str) -> Result<()> {
+        Ok(())
+        /*
+        match response.status() {
+            200 => Ok(self),
+            status => Err(Self::status_error(status)),
+        }
+        */
+    }
+}

 use js_sys::JsString;
 use mogwai::prelude::*;
 use wasm_bindgen::prelude::*;
-use web_sys::{Window, window, Response, Request, RequestInit, RequestMode};
+use web_sys::{Window, window, Response, Request, RequestInit, RequestMode, ReadableStream};
 use super::error::*;
 
 use std::result::Result as StdResult;
@@ -25,7 +25,7 @@ impl Client {
 
     pub async fn get(&self, url :&str) -> Result<(Response, String)> {
         let mut init = RequestInit::new();
-        let request = REQUEST( &url
+        let request = REQUEST( url
                              , init . method("GET")
                                     . mode(RequestMode::Cors) )?;
 
@@ -46,7 +46,7 @@ impl Client {
 
     pub async fn put(&self, url :&str, data :&str) -> Result<Response> {
         let mut init = RequestInit::new();
-        let request = REQUEST( &url
+        let request = REQUEST( url
                              , init . method("PUT")
                                     . mode(RequestMode::Cors)
                                     . body(Some(&data.into())) )?;
@@ -61,4 +61,25 @@ impl Client {
 
         Ok(response)
     }
+
+    pub async fn post_stream( &self
+                            , url :&str
+                            , mime_type :&str
+                            , data :ReadableStream) -> Result<Response> {
+        let mut init = RequestInit::new();
+        let request = REQUEST( url
+                             , init . method("POST")
+                                    . mode(RequestMode::Cors)
+                                    . body(Some(&data.into())) )?;
+
+        request . headers()
+                . set("Content-Type", mime_type)?;
+
+        let response = JsFuture::from( self.window
+                                     . fetch_with_request(&request))
+                     . await?
+                     . dyn_into::<Response>()?;
+
+        Ok(response)
+    }
 }

 use mogwai::prelude::*;
-use web_sys::{HtmlInputElement, window, ImageBitmap, HtmlCanvasElement, CanvasRenderingContext2d};
+use web_sys::{HtmlInputElement, ImageBitmap, HtmlCanvasElement, CanvasRenderingContext2d};
 
-use crate::component::upload::view::upload_preview_view;
+use super::upload::Upload;
 
-async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
-                             , bitmap :ImageBitmap ) {
+pub(super) async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
+                                        , upload :Upload ) {
     while let Some(dom) = rx_canvas.next().await {
         match dom.inner_read() {
             Either::Left(c) => {
@@ -12,10 +12,12 @@ async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
                 let context = canvas
                             . get_context("2d").unwrap().unwrap()
                             . dyn_into::<CanvasRenderingContext2d>().unwrap();
-                context . draw_image_with_image_bitmap_and_dw_and_dh( &bitmap
-                                                                    , 0.0, 0.0
-                                                                    , 100.0, 100.0 )
-                        . unwrap();
+                context
+                    . draw_image_with_image_bitmap_and_dw_and_dh(
+                          &upload.bitmap()
+                        , 0.0, 0.0
+                        , canvas.width() as f64, canvas.height() as f64 )
+                    . unwrap();
             },
             _ => (),
         }
@@ -25,36 +27,28 @@ async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
 pub(super) async fn upload_logic( mut rx_logic: broadcast::Receiver<DomEvent>
                                 , tx_previews: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>
                                 ) {
+    let mut uploads: ListPatchModel<Upload> = ListPatchModel::new();
+
+    mogwai::spawn(uploads.stream().for_each(move |patch| {
+        let patch = patch.map(|u| u.into());
+        let tx_previews = tx_previews.clone();
+        async move {
+            tx_previews.send(patch).await.unwrap();
+        }
+    }));
+
     while let Some(msg) = rx_logic.next().await {
         match msg.clone_inner() {
             Either::Left(val) => {
-                let event = val.dyn_into::<Event>().unwrap();
-                let target = event.target().unwrap();
-                let element = target.dyn_into::<HtmlInputElement>().unwrap();
-                let filelist = element.files().unwrap();
+                let filelist = val.dyn_into::<Event>().unwrap()
+                             . target().unwrap()
+                             . dyn_into::<HtmlInputElement>().unwrap()
+                             . files().unwrap();
 
-                let mut previews = vec![];
                 for index in 0..filelist.length() {
-                    let (tx_canvas, rx_canvas) = broadcast::bounded(1);
                     let file = filelist.item(index).unwrap();
-                    let bitmap =
-                        JsFuture::from( window().unwrap()
-                                      . create_image_bitmap_with_blob(&file.clone().into()).unwrap());
-                    let bitmap = bitmap
-                               . await.unwrap()
-                               . dyn_into::<ImageBitmap>().unwrap();
-
-                    let view = upload_preview_view( tx_canvas
-                                                  , file.name()
-                                                  , file.size()
-                                                  , file.type_()
-                                                  , file.last_modified() );
-                    let logic = upload_preview_logic(rx_canvas, bitmap);
-
-                    previews.push(Component::from(view).with_logic(logic).into());
+                    uploads.list_patch_push(Upload::new(file).await);
                 }
-                let previews = ListPatch::splice(.., previews.into_iter());
-                tx_previews.send(previews).await.unwrap();
             },
             _ => (),
         }

-mod view;
 mod logic;
+mod upload;
+mod view;
 
 use mogwai::prelude::*;
 

+use mogwai::{prelude::*, utils::window};
+use web_sys::{File, ImageBitmap, ReadableStream};
+
+use super::{view::upload_preview_view, logic::upload_preview_logic};
+
+#[derive(Clone, Debug)]
+pub(super) struct Upload {
+    file   :File,
+    bitmap :ImageBitmap,
+}
+
+impl Upload {
+    pub(super) async fn new(file :File) -> Upload {
+        let bitmap = window()
+                   . create_image_bitmap_with_blob(&file.clone().into())
+                   . unwrap();
+        let bitmap = JsFuture::from(bitmap)
+                   . await.unwrap()
+                   . dyn_into::<ImageBitmap>().unwrap();
+
+        Self { file, bitmap }
+    }
+
+    pub(super) fn mime_type(&self) -> String {
+        self.file.type_()
+    }
+
+    pub(super) fn data(&self) -> ReadableStream {
+        self.file.stream()
+    }
+
+    pub(super) fn bitmap(&self) -> ImageBitmap {
+        self.to_owned().bitmap
+    }
+}
+
+impl From<Upload> for Component<Dom> {
+    fn from(upload: Upload) -> Self {
+        let (tx_canvas, rx_canvas) = broadcast::bounded(1);
+
+        let view = upload_preview_view( tx_canvas
+                                      , upload.file.name()
+                                      , upload.file.size()
+                                      , upload.file.type_()
+                                      , upload.file.last_modified() );
+        let logic = upload_preview_logic(rx_canvas, upload);
+
+        Component::from(view).with_logic(logic)
+    }
+}
+
+impl From<Upload> for ViewBuilder<Dom> {
+    fn from(upload: Upload) -> Self {
+        let component :Component<Dom> = upload.into();
+        component.into()
+    }
+}

@@ -11,18 +11,15 @@ pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
 
     builder! {
         <li style:display="flex">
-            <div style:width="100px"
-                 style:height="100px">
-                <canvas post:build=post_build />
-            </div>
-            <div style:width="fit-content">
-                <ul>
-                    <li>{format!("filename: {}", filename)}</li>
-                    <li>{format!("size: {}", size)}</li>
-                    <li>{format!("mime type: {}", mime_type)}</li>
-                    <li>{format!("modification time: {}", mtime)}</li>
-                </ul>
-            </div>
+            <canvas width="75px"
+                    height="75px"
+                    post:build=post_build />
+            <ul>
+                <li>{format!("filename: {}", filename)}</li>
+                <li>{format!("size: {}", size)}</li>
+                <li>{format!("mime type: {}", mime_type)}</li>
+                <li>{format!("modification time: {}", mtime)}</li>
+            </ul>
         </li>
     }
 }
@@ -30,14 +27,15 @@ pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
 pub(super) fn upload_view( tx_logic: broadcast::Sender<DomEvent>
                          , rx_previews: mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>
                          ) -> ViewBuilder<Dom> {
+//            <div class="spin"></div>
     builder! {
         <div class="upload">
-            <div class="spin"></div>
             <div>
                 <input type="file"
                        multiple="multiple"
                        accept="image/*"
-                       on:change=tx_logic.sink()/>
+                       on:change=tx_logic.sink() />
+                <button>"Upload"</button>
             </div>
             <ul patch:children=rx_previews>
             </ul>