start work on upload feature

frontend/src/app.css

@@ -1 +1,5 @@
 body {}
+
+.dragover_highlight {
+    background-color: rgb(215, 215, 215);
+}

frontend/src/components/home.js

@@ -1,7 +1,9 @@
 function getFilesDataTransferItems(dataTransferItems) {
     function traverseFileTreePromise(item, path = "", folder) {
         return new Promise(resolve => {
-            if (item.isFile) {
+            if (item === null) {
+                // nothing to do
+            } else if (item.isFile) {
                 item.file(file => {
                     file.filepath = path + "/" + file.name; //save full path
                     folder.push(file);
@@ -39,3 +41,7 @@ function getFilesDataTransferItems(dataTransferItems) {
 export function get_files_data_transfer_items(data_transfer_items) {
     return getFilesDataTransferItems(data_transfer_items);
 }
+
+export function upload_file(file, url) {
+    new Promise(resolve => console.log(file, url));
+}

frontend/src/components/home.rs

@@ -6,7 +6,10 @@ use gloo_net::http::Request;
 use js_sys::Array;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
-use web_sys::{DataTransferItemList, File, FileSystemDirectoryEntry, FileSystemEntry};
+use web_sys::{
+    DataTransferItemList, Element, File, FileReader, FileSystemDirectoryEntry, FileSystemEntry,
+    HtmlElement,
+};
 use weblog::console_log;
 use yew::prelude::*;
 use yew_hooks::prelude::*;
@@ -52,8 +55,12 @@ pub fn home() -> Html {
         );
     }
 
+    let drag_node = node.clone();
     let ondrop = Callback::from(move |e: DragEvent| {
         e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
 
         let items = e.data_transfer().unwrap().items();
         wasm_bindgen_futures::spawn_local(async move {
@@ -68,8 +75,11 @@ pub fn home() -> Html {
 
                 if let Ok(fse) = d.clone().dyn_into::<File>() {
                     console_log!(&fse);
-                    // fse.filepath = path;
-                    files.push(fse);
+                    files.push(fse.clone());
+                    wasm_bindgen_futures::spawn_local(async move {
+                        let promise = upload_file(fse, "bla".to_owned());
+                        let _result = wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+                    });
                 } else if let Ok(a) = d.clone().dyn_into::<js_sys::Array>() {
                     for i in 0..a.length() {
                         let f = a.get(i);
@@ -91,7 +101,6 @@ pub fn home() -> Html {
                 console_log!(files.len());
                 let Some(current) = new_files.pop() else {
                     console_log!("break");
-
                     break;
                 };
 
@@ -124,8 +133,29 @@ pub fn home() -> Html {
         });
     });
 
+    let drag_node = node.clone();
+    let ondragenter = Callback::from(move |e: DragEvent| {
+        e.prevent_default();
+        // e.data_transfer().unwrap().set_drop_effect("move");
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
+    });
+
+    let drag_node = node.clone();
+    let ondragleave = Callback::from(move |e: DragEvent| {
+        e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
+    });
+
+    let drag_node = node.clone();
     let ondragover = Callback::from(move |e: DragEvent| {
         e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().add_1("dragover_highlight").unwrap();
+        }
     });
 
     let body = if user_ctx.is_authenticated() {
@@ -140,7 +170,7 @@ pub fn home() -> Html {
     };
     html! {
         <BasePage>
-            <div ref={node} {ondrop} {ondragover}>
+            <div ref={node} {ondrop} {ondragenter} {ondragleave} {ondragover}>
                 {body}
             </div>
         </BasePage>
@@ -150,4 +180,5 @@ pub fn home() -> Html {
 #[wasm_bindgen(module = "/src/components/home.js")]
 extern "C" {
     fn get_files_data_transfer_items(data_transfer_items: DataTransferItemList) -> js_sys::Promise;
+    fn upload_file(file: File, url: String) -> js_sys::Promise;
 }