cfg out globalhotkey

examples/file_upload.rs

@@ -20,6 +20,7 @@ struct UploadedFile {
 fn app() -> Element {
     let mut enable_directory_upload = use_signal(|| false);
     let mut files_uploaded = use_signal(|| Vec::new() as Vec<UploadedFile>);
+    let mut hovered = use_signal(|| false);
 
     let read_files = move |file_engine: Arc<dyn FileEngine>| async move {
         let files = file_engine.files();
@@ -39,18 +40,12 @@ fn app() -> Element {
         }
     };
 
-    let handle_file_drop = move |evt: DragEvent| async move {
-        if let Some(file_engine) = evt.files() {
-            read_files(file_engine).await;
-        }
-    };
-
     rsx! {
         style { {include_str!("./assets/file_upload.css")} }
 
         h1 { "File Upload Example" }
         p { "Drop a .txt, .rs, or .js file here to read it" }
-
+        button { onclick: move |_| files_uploaded.write().clear(), "Clear files" }
 
         div {
             label { r#for: "directory-upload", "Enable directory upload" }
@@ -75,14 +70,17 @@ fn app() -> Element {
         }
 
         div {
-            // cheating with a little bit of JS...
-            "ondragover": "this.style.backgroundColor='#88FF88';",
-            "ondragleave": "this.style.backgroundColor='#FFFFFF';",
-            "ondrop": "this.style.backgroundColor='#FFFFFF';",
             id: "drop-zone",
-            prevent_default: "ondragover",
-            prevent_default: "ondrop",
-            ondrop: handle_file_drop,
+            prevent_default: "ondragover ondrop",
+            background_color: if hovered() { "lightblue" } else { "lightgray" },
+            ondragover: move |_| hovered.set(true),
+            ondragleave: move |_| hovered.set(false),
+            ondrop: move |evt| async move {
+                hovered.set(false);
+                if let Some(file_engine) = evt.files() {
+                    read_files(file_engine).await;
+                }
+            },
             "Drop files here"
         }