Get preview and file info from file selector

 .markdown {
 .markdown {
-  float: left;
-  padding: 1em;
-  border-radius: .5em;
-  border: 1px solid #ddd;
-  background: #f7f7f7;
+	float: left;
+	padding: 1em;
+	border-radius: .5em;
+	border: 1px solid #ddd;
+	background: #f7f7f7;
 }
 }
 
 
 .markdown p {
 .markdown p {
-  text-align: justify;
-  text-indent: .5em;
-  margin-block: .5em;
+	text-align: justify;
+	text-indent: .5em;
+	margin-block: .5em;
 }
 }
 
 
 .markdown > div:first-child {
 .markdown > div:first-child {
-  position: fixed;
+	position: fixed;
 	width: inherit;
 	width: inherit;
 	z-index: 10;
 	z-index: 10;
 }
 }
 
 
 .markdown > div:first-child > div {
 .markdown > div:first-child > div {
 	position: relative;
 	position: relative;
-  left: .5em;
+	left: .5em;
 	width: inherit;
 	width: inherit;
 }
 }
 
 
 .markdown > div:first-child > pre {
 .markdown > div:first-child > pre {
-  white-space: pre-wrap;
-  height: 15em;
+	white-space: pre-wrap;
+	height: 15em;
 	width: calc(100% - 10px);
 	width: calc(100% - 10px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #ffffff;
-  border-radius: .35em;
-  border: 2px solid #bbb;
-  margin: 2px 0px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	background: #ffffff;
+	border-radius: .35em;
+	border: 2px solid #bbb;
+	margin: 2px 0px;
 	opacity: .95;
 	opacity: .95;
 }
 }
 
 
 .markdown > div:first-child > div > div {
 .markdown > div:first-child > div > div {
-  display: inline;
+	display: inline;
 }
 }
 
 
 .markdown > div:first-child > div ul {
 .markdown > div:first-child > div ul {
-  height: 15em;
-  list-style-type: none;
-  margin: 2px 0px;
-  overflow-y: auto;
-  padding-left: 0px;
-  position: absolute;
-  scroll-behavior: auto;
-  top: 1.8em;
+	height: 15em;
+	list-style-type: none;
+	margin: 2px 0px;
+	overflow-y: auto;
+	padding-left: 0px;
+	position: absolute;
+	scroll-behavior: auto;
+	top: 1.8em;
 }
 }
 
 
 .markdown blockquote {
 .markdown blockquote {
-  border-left: 5px solid #ccc;
-  margin: .5em 10px;
-  padding: .5em 10px;
+	border-left: 5px solid #ccc;
+	margin: .5em 10px;
+	padding: .5em 10px;
 }
 }
 
 
 .markdown blockquote p {
 .markdown blockquote p {
-  text-align: left;
-  text-indent: 0;
-  margin-block: 0;
+	text-align: left;
+	text-indent: 0;
+	margin-block: 0;
 }
 }
 
 
 .markdown .footnote-definition > * {
 .markdown .footnote-definition > * {
-  display: inline;
+	display: inline;
+}
+
+@keyframes spinner {
+	0% {
+		transform: translate3d(-50%, -50%, 0) rotate(0deg);
+	}
+	100% {
+		transform: translate3d(-50%, -50%, 0) rotate(360deg);
+	}
+}
+
+.spin::before {
+	animation: 1.5s linear infinite spinner;
+	animation-play-state: inherit;
+	border: solid 5px #cfd0d1;
+	border-bottom-color: #1c87c9;
+	border-radius: 50%;
+	content: "";
+	height: 1.5em;
+	width: 1.5em;
+	position: absolute;
+	top: 10%;
+	left: 1.5em;
+	transform: translate3d(-50%, -50%, 0);
+	will-change: transform;
 }
 }

@@ -36,20 +36,28 @@ version = "^0.5"
 [dependencies.web-sys]
 [dependencies.web-sys]
 version = "^0.3"
 version = "^0.3"
 features = [
 features = [
-  "Document",
-  "DomParser",
-  "Headers",
-  "HtmlElement",
-  "HtmlInputElement",
-  "MouseEvent",
-  "Node",
-  "Request",
-  "RequestInit",
-  "RequestMode",
-  "Response",
-  "SupportedType",
-  "Window",
-]
+	"Blob",
+	"CanvasRenderingContext2d",
+	"Document",
+	"DomParser",
+	"File",
+	"FileList",
+	"FileReader",
+	"ImageBitmap",
+	"Headers",
+	"HtmlCanvasElement",
+	"HtmlElement",
+	"HtmlInputElement",
+	"MouseEvent",
+	"Node",
+	"ReadableStream",
+	"Request",
+	"RequestInit",
+	"RequestMode",
+	"Response",
+	"SupportedType",
+	"Window",
+	]
 
 
 [dev-dependencies]
 [dev-dependencies]
 wasm-bindgen-test = "0.2"
 wasm-bindgen-test = "0.2"

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

+use mogwai::prelude::*;
+use web_sys::{HtmlInputElement, window, ImageBitmap, HtmlCanvasElement, CanvasRenderingContext2d};
+
+use crate::component::upload::view::upload_preview_view;
+
+async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
+                             , bitmap :ImageBitmap ) {
+    while let Some(dom) = rx_canvas.next().await {
+        match dom.inner_read() {
+            Either::Left(c) => {
+                let canvas = c.to_owned().dyn_into::<HtmlCanvasElement>().unwrap();
+                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();
+            },
+            _ => (),
+        }
+    }
+}
+
+pub(super) async fn upload_logic( mut rx_logic: broadcast::Receiver<DomEvent>
+                                , tx_previews: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>
+                                ) {
+    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 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());
+                }
+                let previews = ListPatch::splice(.., previews.into_iter());
+                tx_previews.send(previews).await.unwrap();
+            },
+            _ => (),
+        }
+    }
+}

+mod view;
+mod logic;
+
+use mogwai::prelude::*;
+
+use self::{view::upload_view, logic::upload_logic};
+
+pub(crate) async fn new() -> Component<Dom> {
+    let (tx_logic, rx_logic) = broadcast::bounded(1);
+    let (tx_previews, rx_previews) = mpmc::bounded(1);
+
+    let view = upload_view(tx_logic, rx_previews);
+    let logic = upload_logic(rx_logic, tx_previews);
+
+    Component::from(view).with_logic(logic)
+}

+use mogwai::prelude::*;
+
+pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
+                                 , filename  :String
+                                 , size      :f64
+                                 , mime_type :String
+                                 , mtime     :f64 ) -> ViewBuilder<Dom> {
+    let post_build = move |dom: &mut Dom| {
+        tx_canvas.try_broadcast(dom.clone()).unwrap();
+    };
+
+    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>
+        </li>
+    }
+}
+
+pub(super) fn upload_view( tx_logic: broadcast::Sender<DomEvent>
+                         , rx_previews: mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>
+                         ) -> ViewBuilder<Dom> {
+    builder! {
+        <div class="upload">
+            <div class="spin"></div>
+            <div>
+                <input type="file"
+                       multiple="multiple"
+                       accept="image/*"
+                       on:change=tx_logic.sink()/>
+            </div>
+            <ul patch:children=rx_previews>
+            </ul>
+        </div>
+    }
+}

@@ -6,7 +6,7 @@ mod component;
 
 
 use std::panic;
 use std::panic;
 
 
-use crate::component::markdown;
+use crate::component::*;
 use log::Level;
 use log::Level;
 use mogwai::prelude::*;
 use mogwai::prelude::*;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::prelude::*;
@@ -16,8 +16,14 @@ pub async fn main() -> Result<(), JsValue> {
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     console_log::init_with_level(Level::Trace).unwrap();
     console_log::init_with_level(Level::Trace).unwrap();
 
 
-    let comp = markdown::new().await;
+    let md = markdown::new().await;
+    let comp = upload::new().await;
 
 
-    let page = Component::from(builder! {{comp}});
+    let page = Component::from(builder! {
+        <div>
+            {comp}
+            {md}
+        </div>
+    });
     page.build()?.run()
     page.build()?.run()
 }
 }